Css Snippets » jquery

Jquery – laat change() werken in IE8 & IE7

Mark — Sun, 28 Mar 2010 09:09:10 +0000

Om hoofdpijn van te krijgen, change() function werkt blijkbaar niet in Internet Explorer 8 & 7, dus waarschijnlijk ook niet niet in Internet Explorer 6. Maar de oplossing is vrij eenvoudig;

Met bind() 2 functions meegeven, click() voor IE en change() voor de anderen:

Niet crossbrowser manier

Crossbrowser manier

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Open en toe met CSS & Jquery

Mark — Wed, 24 Mar 2010 09:41:37 +0000

Het is altijd weer het wiel opnieuw uitvinden, een eenvoudige manier om via een klik op een element een ander element te tonen of te verbergen.

HTML

Open & Toe

	
		Inhoud titel

Afbeeldingen

CSS

h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px;
background: url(toggle_block_btm.gif) no-repeat left bottom;
}

Jquery/Javascript

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Jquery – verwijder margin van elk 5de element

Mark — Wed, 10 Feb 2010 07:28:12 +0000

Meestal als je afbeeldingen, of verschillende blokken langs elkaar float, bijvoorbeeld 5 langseen, en je weet niet op voorhand hoeveel items er zullen zijn, zit je altijd met het probleem van margin aan de rechter kant (als je op deze manier spatie wilt verzekeren tussen je blokken). Nu kan de laatste margin-right je laatste blok naar de volgende lijn schuiven omwille van de extra ruimte die nodig is.
Je kan dit met Jquery oplossen.

HTML

>div id="blokken">
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
>/div>

CSS

#blokken {
width: 540px;
}
.blok-item {
width: 100px;
background-color: #aaa;
margin: 0 10px 10px 0;
}

Jquery

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

JQuery – performance tips #2

Mark — Tue, 02 Feb 2010 07:01:55 +0000

Je kan je JQuery aanzienlijk versnellen door je selectors op #(id) te laten selecteren in plaats van op .(class), omdat JQuery gebruik maakt van de browser eigen getElementById() functie, dewelke aanzienlijk sneller werkt.

Doe de test

JQuery

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

JQuery – performance tips #1

Mark — Fri, 29 Jan 2010 07:00:27 +0000

JQuery is snel, maar soms kan je het gebruik en proces ervan versnellen door de juiste functie op de juiste plaats te gebruiken:
Stel je hebt 5 dezelfde .class en je wil de hoeveelheid ervan weten:

JQuery

Sneller resultaat

Iets minder snel resultaat

Dus het is aangeraden length te gebruiken.

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

jQuery – bepaal atribuut waarde

Mark — Mon, 25 Jan 2010 07:59:47 +0000

Zoals je in de vorige Snippet kon zien hoe je een waarde van een attribuut kon opvragen, je kan deze waarde ook zetten/aanpassen:

jQuery

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

jQuery – verkrijg html-tag attribuut

Mark — Thu, 21 Jan 2010 07:47:57 +0000

Met jQuery kun je elke attribuut waarde (id, class, name, title, href …) opvragen van eender welke HTML tag door gebruik te maken van de attr() funktie. Het resultaat is een string die de attribuut waarde is.

HTML


  Some content
  link

jQuery

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Jquery: toon paswoord

Mark — Mon, 14 Dec 2009 07:01:31 +0000

Misschien heb je al een keer voorgehad, je vult een paswoord in – deze wordt automatisch gemaskeerd met bolletjes – en je moet het paswoord een tweede keer invullen, maar je bent niet meer 100% zeker wat je hebt ingevuld, zou het dan niet handig zijn als je de mogelijkheid had om te zien wat je hebt ingegeven?

HTML


 
  Password:
  
 
 
  
  Show characters

Javascript/Jquery

');
  } else {
   $('#password').replaceWith('');
  }
 });
});
]]>

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Met link-tabs dynamisch inhoud veranderen

Mark — Tue, 17 Nov 2009 06:45:06 +0000

Een tabbed navigatie die zonder page-refresh inhoud verandert door middel van Jquery:

HTML


		
    		
                Top Snippets
                Handig
                Javascript
                Classics
            
    		
    			
    				Target=_blank op de XHTML manier
    				1 kolom header sidebar content 
    				Tooltip met enkel CSS
    				Check/Uncheck alle checkboxes
    				Veranderen van tekst-selectie kleur
    				CSS opacity
    				Toon applicatie icon naast link
    			
        	
            CSS Horizontaal drop-down (uitklap) navigatie
            Toon scrollbar in Firefox altijd
            Formulier velden en line-height in FireFox probleem
            Haslayout oplossen in IE6 & IE7
            Eenvoudig en valid CSS hacken
    				CSS hack voor Chrome en Safari
    				Position : fixed in MSIE6
    				Volgorde stylesheets
    				HTML hr stylen via CSS
        		Conditional comments, allemaal
    				CSS Bar Graph complex
        	
        	
        		Anything Slider jQuery Plugin
        		Moving Boxes
    				Simple jQuery Dropdowns
    				Tekst zoom
    				:before & :after voor blockquote
    				Eenvoudige CSS dropdown navigatie
    				Alles:hover, :active, :focus voor IE6
    				Styling abbrevation in IE
        	
        	
            Media type print bepalen
            Basic XHTML 1.0 Strict template
            Valid XHTML met flash
            Printen van URL naast link
            Formulier zonder tabellen
            CSS shorthand voor color

CSS

#page-wrap {
width: 440px;
margin: 20px auto;
}
ul {
list-style: none;
padding: 0;
font-size: 1.3em;
margin: 0;
}
ul li a {
display: block;
border-bottom: 1px solid #666;
padding: 4px;
color: #666;
text-decoration: none;
}
ul li a:hover {
background: #fe4902;
color: #fff;
}
ul li:last-child a {
border: none;
}
#organic-tabs {
background: #c9f2ba;
padding: 10px;
margin: 0 0 15px 0;
border: 1px solid #84c984;
}
#explore-nav {
overflow: hidden;
margin: 0 0 10px 0;
}
#explore-nav li {
width: 97px;
float: left;
margin: 0 10px 0 0;
}
#explore-nav li.last {
margin-right: 0;
}
#explore-nav li a {
display: block;
padding: 5px;
background: #959290;
color: #fff;
font-size: 10px;
text-align: center;
border: 0;
}
#explore-nav li a:hover {
background-color: #111;
}
#javascript, #handig, #classics {
display: none;
}
#explore-nav li#ex-featured a.current, ul#top li a:hover {
background-color: #0575f4;
color: #fff;
}
#explore-nav li#ex-core a.current, ul#handig li a:hover {
background-color: #d30000;
color: #fff;
}
#explore-nav li#ex-jquery a.current, ul#javascript li a:hover {
background-color: #8d01b0;
color: #fff;
}
#explore-nav li#ex-classics a.current, ul#classics li a:hover {
background-color: #FE4902;
color: #fff;
}

Jquery

Je hebt ook Jquery nodig:

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Jquery – Class toevoegen afhankelijk van browser

Mark — Wed, 11 Nov 2009 06:58:55 +0000

Browser sniffing is het bepalen van de gebruikte webbrowser en is iets wat vroeger gebeurde tijdens de browser-wars, nadien was iedereen ertegen. In principe zou elke browser zich moeten houden aan de W3C-specificaties, maar in de praktijk voldoet geen enkele browser daar 100% aan.
Met de volgende eenvoudige Jquery manier kan je een class toevoegen aan bijvoorbeeld je HTML-tag afhankelijk van de gebruikte browser en van daaruit je CSS aanpassen naargelang.

Jquery

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon