Skip to content

jQuery

[Bootstrap] Solution for keeping dropdowns inside the screen in mobile devices.

If you have any question about code, drop a comment

<div class="visible-xs" id="visible-xs"></div>
<script type="text/javascript">
if ($("#visible-xs").css("display") === "block") { 
	$('[data-toggle=dropdown]').click(function() {
                var menu = $(this).parent().find("ul:first");
                var menupos = $(this).offset();

            	if($(this).parent().hasClass("pull-right")){
                	menupos_right = $(window).width() - (menupos.left + $(this).outerWidth());
                    if (menupos_right + menu.width() > $(window).width()) {
                        var newpos = -(menupos_right + menu.width() - $(window).width());
                        menu.css({ right: newpos });    
                    }
                } else {
                     if (menupos.left + menu.width() > $(window).width()) {
                        var newpos = -(menupos.left + menu.width() - $(window).width());
                        menu.css({ left: newpos });    
                    }
          		}
	});
}	
</script>

jQuery ile yeni elementlere müdahale

Diyelim ki sitenizde jQuery kullanarak bazı elementleri sayfa açılışında değiştiriyorsunuz. Örneğin;

jQuery(document).ready(function() {  	
	jQuery("img.avatar").parent("a").addClass("thumbnail pull-left"); 
});

Herşey güzel görünüyor sorun yok derken bir baktınız ki ajax kullanarak site içinde değişiklik yaptığınız zaman yeni eklenen içeriğe sayfa açılışında yaptığınız değişiklikler uygulanmıyor. Ve işin kötüsü jQuery ile yeni eklenen elementlere müdahale edemiyorsunuz çünkü o elementler sayfa açılışında orada değildi.
Continue reading