Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got a jQuery script included in my MasterPage's <head> tags that runs whenever a link is pressed in the navbar. (I've made it trigger on any anchor tag.)
So I was thinking: since it triggers on any anchor tag it would also trigger on anchor tags that are in segment files (files that contain a little HTML and are inserted using AJAX) but it doesn't.
The only way to get it to work is to include the JavaScript file into all the segment pages.
example:
mainpage:
<br>
html
<br>
head<br> script src="script.js"/script<br>/head
<br>
body
div class="container"/div
All the partial html files are loaded into the container.
So one would think they also share the same <head> as the full page still contains that same header.
But the scripts don't work?
ps: to the unclear what i'm asking report: apparently some people understood me, thanks a lot to those who did :)
You will have to delegate the event to all current and future anchor elements using a particular version of on():
$(function() { // dom-ready
$(document).on('click', 'a', function(e) {
// handle click
});
})
If you load content dynamically then events won´t be hooked. Use "on" event instead of "click".
It would be something like:
$( "a" ).on( "click", function() {
alert( $( this ).text() );
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm working on my personal website and have implemented a preloader.
After adding a second div to my website, I noticed I can scroll during the page loading. I dunno about you but I find that ugly and disturbing.
Here is a quick video. (I use chromeOS)
Video
I really couldn't find anything on this because I think I was the only one with this problem. I'm not sure, however.
I used $(window).on("load",function(){$(".loader-wrapper").fadeOut("slow");}); as well
Here is the code (Github Repo)
Anyways, that's all I got.
Thanks in advance.
You can add by default a class to your body the class should be as follows.
// CSS
.no-scroll {
overflow: hidden;
}
<body class="no-scroll">
Once your script has completed or your function finishes you just call
document.body.classList.remove('no-scroll');
Make sure to add the following section at the end of your page.
<script type="text/javascript">
(function(){
function onReady() {
document.body.classList.remove('no-scroll');
}
if ( document.readyState === 'complete' ) {
onReady();
} else {
document.addEventListener('DOMContentLoaded', onReady);
}
})();
</script>
Or you can do it with jQuery
// Make sure this code is the last piece of code in your HTML.
$(window).on("load", function() {
document.body.classList.remove('no-scroll');
});
PS: Additionally to that consider the unlike scenario when someone does not have JavScript enabled so you add a default behavior. Take a look at <noscript> tag.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a jQuery function that basically toggles a div on click but it doesn't work I can't tell if I maybe imported the library incorrectly or what but I can't get it to function at all. Please tell me if I am missing anything or messed up my code somewhere.
My exact code looks like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.notifications-dropdown-trigger").click(function () {
$('#post-notifications-dropdown').toggle('slide', {
duration: 100,
direction: 'up'
});
});
});
</script>
The HTML markup:
<a class="notifications-dropdown-trigger">click me</a>
<div id="post-notifications-dropdown">
.... code
</div>
Everything is coded directly onto servers and is live the moment I save.
You can simply use .slideToggle()
Description: Display or hide the matched elements with a sliding motion.
Code
$(document).ready(function(){
$("a.notifications-dropdown-trigger").click(function (event) {
$('#post-notifications-dropdown').slideToggle(100);
event.preventDefault();
});
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have an image scroller that is blocking resources from loading until it has loaded.
I have tried deferring the script but it then doesnt want to work when its deferred.
What would be the simplest method for getting it to load after the rest of the page?
Ive looked at some jquery methods but its like reading chinese to me
Here are some various options:
Place the <script> tag right before the </body> tag. This will allow the rest of the DOM to load before your script even starts to load.
Construct some code to dynamically load the script and don't run that code until either $(document).ready() fires or perhaps even $(window).load() fires depending upon how many resources you want to wait for before starting your script. You can dynamically load the script in jQuery with $.getScript() or it's fairly simple to just dynamically insert a script tag too.
Troubleshoot your code to figure out why the defer attribute doesn't work because it's designed for situations like yours where you want other things to load first. My guess this was because you added defer loading for the library, but didn't delay your own code that attempts to use the library thus that code didn't work when you deferred the loading of the library.
Some references on script loading:
load and execute order of scripts
Script Tag - async & defer
improving website performance by dynamically loading javascript?
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
In looking at your actual page code, a reason why your script wouldn't work when you add defer to it is that you have code that depends on that script that can't be run until after the dynamic scroll code has been loaded. In looking at your code, I see this block of code and one other block similar to it:
<script type="text/javascript">
if ( DYN_WEB.Scroll_Div.isSupported() ) {
DYN_WEB.Event.domReady( function() {
// arguments: id of scroll area div, id of content div
var wndo = new DYN_WEB.Scroll_Div('wn', 'lyr1');
// see info online at http://www.dyn-web.com/code/scrollers/continuous/documentation.php
wndo.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt1', speed:100, bPauseResume:true} );
var wndo2 = new DYN_WEB.Scroll_Div('wn2', 'lyr2');
wndo2.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt2', speed:60, bPauseResume:true} );
});
}
</script>
Both of these have to be run AFTER the scroll library is loaded. So, if you delay the loading of the scroll library, then this code has to be run after the library is loaded.
If you're moving the scroll library to right before </body>, then place these blocks of code right after it (without using the defer tag on any).
Try this:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(window).bind("load", function() {
// code here
});
</script>
or this:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(window).bind("load", function() {
if ( DYN_WEB.Scroll_Div.isSupported() ) {
DYN_WEB.Event.domReady( function() {
// arguments: id of scroll area div, id of content div
var wndo = new DYN_WEB.Scroll_Div('wn', 'lyr1');
// see info online at http://www.dyn-web.com/code/scrollers/continuous/documentation.php
wndo.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt1', speed:100, bPauseResume:true} );
var wndo2 = new DYN_WEB.Scroll_Div('wn2', 'lyr2');
wndo2.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt2', speed:60, bPauseResume:true} );
});
}
});
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I found this bit of code and it works great for preloading, but it totally clogs the page load initially. I've been trying for hours to get this thing to run only after the page is loaded with no success. I've been using one image, "big_image.jpg" (8MB) to test it out. As is, everything preloads using the below code, including the large file. Anytime I attempt to get it to pre-load after the document is ready, it fails. I've even tried other code that purports to do what I want, but they all fail - once the page loads, none will keep loading the really big image. Whats up with that?
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['picture.jpg','background.jpg','vertical.jpg','big_image.jpg']).preload();
Since you found the answer based on my help:
It seems that you are using jQuery. You can wrap the function call inside a ready function: Specify a function to execute when the DOM is fully loaded.
function loadImages(){
var img1 = "http://farm3.staticflickr.com/2826/11581275325_d61be12908_h.jpg"
var markup = "<h3>Images after pageload</h2>"+"<img src='"+img1+"' />";
$("#images").html(markup);
}
$( document ).ready(function() {
// Handler for .ready() called.
loadImages();
});
You may take a look at my codepan example
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I can't seem to get my click trigger to work.
I've tried the following:
//Handle the Main Menu Button Press
$("button").click( function() {
alert('yep');
});
And I never get the alert when I click any button on my site....
Where did I go wrong?
might be one of these:
- you forgot to include jQuery.js script in your header
- you didn't wait till DOM loaded
try:
$( function() {
$("button").click( function() {
alert('yep');
});
});
Your code works just fine. Here is a fiddle
You need to ensure you have jQuery loaded, you have waited for the DOM to load using
$(function() {
//your code here
});
And if you have multiple buttons, you will need to use CSS selectors to differentiate.
I would HIGHLY suggest you read this document, provided by jQuery
The HTML could be
<button type="button" name="btnOk" id="btnOk">ok</button>
The jQuery code could be
$("button[type='button']").click(function(){
alert("yeap");
});
or
$("button[name='btnOk']").click(function(){
alert("yeap");
});
If HTML is
<input type="button" name="btnOk" id="btnOk" value="Ok"/>
the code could be
$("input[type='button']").click(function(){
alert("yeap");
});
At first, be sure that :has the jquery code in
$(document).ready(function(){
//jquery code
});