I use 4 link (submenu button) on my site. Every link open a DIV tag.
This DIV tags default stat is hide. (with jquery)
$('div[class*="my_"]').hide();
After i click a submenu then i show() the div tag i need:
$('a#submenu_1').click( function() {
$('div[class*="my_"]').hide(); // hide all DIV if some of them opened before
$('div.my_submenu_1').toggle('slow');
});
This is work well, till i patient to wait to hide if other DIV is opened before. But if im a click too fast between sub-menus then sometimes jquery can't HIDE the div tag before SHOWn the new.
My i use some dealy .. wait?
Could you suggest me something?!
I agree with #Ghommey, but you may also want to do the show as part of the callback to hide() so that you know that all of the others are hidden first.
$('div[class^="my_"]').stop().hide(0,function() {
$('div.my_submenu_1').show('slow');
});
Note, that you could probably rewrite this a little more generically.
$('a.menu').click( function() {
var menuID = $(this).attr('href');
$('div.menu').stop().hide(0,function() {
$(menuID).show('slow');
});
return false;
});
where your HTML looks like:
Menu 1
Menu 2
...
<div id="my_menu_1" class="menu">...</div>
<div id="my_menu_2" class="menu">...</div>
This would have the advantage of having the link actually work if javascript were turned off.
Related
Imagine that I have two divs , left div and right div ,
In the left div I have some button. When I click on the home button the page home.php loaded in the right div, I use load() function to do this and when I click on about button the page about.php loaded in the right div .
My problem is that I have some other buttons in that page (I mean about.php). When I click on it some other pages must load in the right div.
I mean when I click on about button in the left div, about.php loaded in the right div.
I don't have a problem doing this it's work fine , but the problem is when i click on a button in about.php, I want about.php to be hide and load x.php in his place (right div).
This is the code that I have :
$('#about').click(function () {
$('#rightdiv').load('about.php', function() {
$('#about_button').click(function () {
$('#rightdiv').load('x.php');
})
})
})
First of all, you shouldn't nest your click handlers like you have done - they should be separate. Second, when you load the about.php jQuery is unaware of the new stuff that you have placed in the DOM. To fix that you use event delegation, meaning the click event from about.php will bubble up to an element that already existed at the time the page was loaded. jQuery is aware of that element and will handle the event properly.
$('#about').click(function () {
$('#rightdiv').load('about.php');
});
// 'click' event delegated to 'body'
$('body').on('click', '#about_button', function () { // #about_button is in about.php
$('#rightdiv').load('x.php');
})
Instead of binding the event to the items on load, you tell the browser to check ther a.nav's which occur in the document.
<a class="nav" href="about.php">about.php</a>
<a class="nav" href="other.php">other.php</a>
<a class="nav" href="last.php">last.php</a>
$(document).on('click', 'a.nav',function (e) {
e.preventDefault();
var page = this.href;
$('#rightdiv').load(page);
})
It's better to make the first selecttor ( $(document) ) as close to the actual elements, and highly recommended you use an ID:
$('#rightdiv').on('click', 'a.nav',function (e) {});
In this snippet, all a.nav in #rightdiv will get triggered, initial load or dynamicly.
you have to bind all click events after you load that php page, so create a function, that will do it after every .load call
My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:
/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>
/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
<div id="fixedPopContent" class="c-popup">
<h2 class="c-popup-header">Question Issue Fix</h2>
<div class="c-content">
<h3>Is question reported issue fixed?</h3>
Yes
No
</div>
</div>
</div>
Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.
Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.
My code is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$('#fixedPop_url').attr('href', action_url1);
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").click(function(event) {
event.preventDefault();
$("#fix_"+qid).hide();
$("#notfix_"+qid).show();
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
So you need to load the page at the url but not navigate to it.
You can use .load() .
So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.
$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');
$("#container").load(url);
});
Few things to keep in mind,
This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.
You can do that with history.js. Here is an example;
HTML:
Delete
Update
<div id="content"></div>
JS:
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$('#content').load(State.url);
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
return false;
});
You can see code here: jsfiddle code
You can see demo here: jsfiddle demo
Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.
I'm using slider and having it open up on a specific image when the page loads. That happens just fine, only when I go to select another image it stays visible as the other one also pops up.
Here is my current code for forcing it to appear.
<script>
$(document).ready(function(){
$("#793").show();
});
</script>
the page can be seen here, select another image at the bottom and you'll see what I mean.
http://www.shehitpausestudios.com/index.php/shop/polaroids/girls-and-dreams/last-summer/
maybe try something like this
$(".bjqs li div").click(function(){
$(".person_about").hide();
var image = $(this).attr("data-rel");
var div = image.replace('#','');
$(".person_about #"+div).show();
return false;
});
The plan was to add a scroll w/a loading scroll within a page. 2 problems with that: My loading scroll does not work & I'm not sure if I should use an iframe to implement the loading scroll. Mainly because I have a jQuery sortable, droppable within my div and am not sure if I can drag outside a iframe. Any ideas would be appreciated
$(#win).scroll(function(){
//replaced window with #win, which is the id of the div containg database info
if($(this)[0].scrollTop() == $(this)[0].height()- $(this).height()){
//everytime we scroll we have this function activated
//if statement is saying if we're at the bottom of the page
//$('div#text').hide();
$('div#loadMoreComments').show();
//.show is showing the div above which has the loading animation
$.ajax({
url: "loadem.php?lastComment="+ $(".postedComment:last").attr("id"),
//using get variable to say last comment is equal to + posted
//comment which is the last comment that's displayed &
//that last comment has an id
success: function(html){
if (html){
$("#postedComment").append(html);
//if we are at the bottom we will add comments to the page
//and hide the animation
$('div#loadMoreComments').hide();
//$('div#text').show();
}else{
$('div#loadMoreComments').replaceWith("<div class='box'><center>Finished Loading</center></div>");
//if theres no more to scroll then the finished loading will show
}
}
});
}
});
if((jQuery(window).scrollTop()) > (jQuery(document).height() - jQuery(window).height()))
{
...... YOUR CODE IS HERE.....
}
this code will work the continuous pagination of your page. As far as I am concern it will have no effect on sortable, droppable cause you said it pagination div have covered all child element.
Hope this will help.
I am trying to figure out how to smoothly navigate between divs using jquery. I have a php website with 4 navigation divs. So when I click "staff" on the page I navigate to that div. How would I do this using jquery ?
This is how I´m using this:
<div id="top_links">
<p class="top_link">The Firm</p>
</div>
i´m trying to make it look like this website: http://themetrust.com/demos/solo/#services
I´m new to jquery. I cant see how I should do this so any suggestion would be a HUGE help.. Thanks :D
You can animate the scrollTop property with jQuery:
$('a').on('click', function (event) {
//stop the browser from jumping to the anchor
event.preventDefault();
//get the href for this link and the offset from the top of the page for the target of that href
var href = $(this).attr('href'),
oset = $(href).offset().top;
//animate the scroll to the selected element
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
//after the animation is complete, update the hash in the address bar so that the state is saved (if the user refreshed the page they can be brought back to this place, but that takes a bit more code)
location.hash = href;
});
});
Here is a demo: http://jsfiddle.net/Hpegt/1/
This requires that your links are targeting elements on the page using the syntax: #element-id.
Note that .on() is new in jQuery 1.7 and is the same in this case as .bind().
UPDATE
One cool thing that you can do with this is add a custom easing method. If you use the jQuery Easing Plugin ( http://gsgd.co.uk/sandbox/jquery/easing/ ) then you can choose from lots of types of easing. I like easeInOutExpo for animating page scrolling.
You can use the scrollTo plugin: http://demos.flesler.com/jquery/scrollTo/
The example page is using jQuery.ScrollTo
Looks like they're using these libraries:
jQuery.scrollTo
easySlider
visualNav
You'll want to use jQuery's animate() function to adjust the window.scrollTop property to align with the appropriate div.