I have the following code which loads content into a div, then fades in:
$('a.search').click(function(){
$('.pop-up').load('search.php', function(){
$(this).fadeToggle();
});
});
However, I'm assuming this is making a request each time the a.search is clicked, if it is a toggle?
Is there a more economic way to achieve this toggle without making multiple calls?
Implement the toggle in your own code instead of using .fadeToggle.
$('a.search').click(function(){
if ($('.pop-up').is(':visible')) {
$('.pop-up').fadeOut();
} else {
$('.pop-up').load('search.php', function(){
$(this).fadeIn();
});
}
});
You can check for one time loading by setting a global variable.Assuming that your pop-up div style is set to display:none, example code is provided below:
var isPopUpLoaded = false;
$('a.search').click(function(){
if(isPopUpLoaded==false){
$('.pop-up').load('search.php', function(){
isPopUpLoaded = true;
});
}
$('.pop-up').fadeToggle();
})
;
Related
I have one script that shows a tooltip on click and the other script shows a menu after a certain point in the page.
If the menu doesn't load, then I can click on the buttons to show the tooltips just fine. But when the menu does show up, the tooltips script doesn't show anymore.
<script>
$(document).ready(function() {
$('#left-tooltip').click(function() {
$('#lollefttooltip').toggle();
});
});
$(document).ready(function() {
$('#right-tooltip').click(function() {
$('.right-tooltip').toggle();
});
});
</script>
<script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 650) {
$("#nav-block:hidden").css('visibility', 'visible');
$("#nav-block:hidden").fadeIn('650');
$("#nav-wrap:hidden").css('visibility', 'visible');
$("#nav-wrap:hidden").fadeIn('650');
$("#header-wrap:hidden").css('visibility', 'visible');
$("#header-wrap:hidden").fadeIn('650');
} else {
$("#nav-block:visible").fadeOut("650");
$("#nav-wrap:visible").fadeOut("650");
$("#header-wrap:visible").fadeOut("650");
}
});
});
</script>
Thanks in advance for the help!
update: Here is all the code I have for this. http://jsfiddle.net/parachutepenny/82J6G/11/
I'm sorry in advance for any beginner errors that I may have all over the place. I'm still learning how to code.
This doesn't answer your question, but there are some great opportunities to optimize here. Aside from best practice, they may also sort out the bugginess. Something like:
$(document).ready(function() { // combine doc.ready
var win = window, // store window as a variable
$bod = $('body');
$('#left-tooltip').click(function() {
$('#lollefttooltip').toggle();
});
$('#right-tooltip').click(function() {
$('.right-tooltip').toggle();
});
$(win).scroll(function() {
if (win.scrollY > 650) { // use scrollY from window variable so you're not retrieving from the DOM
$bod.addClass('navVisible'); // use classes on body to trigger CSS transitions on the children
} else {
$bod.removeClass('navHidden');
}
});
});
Put your multiple click function into single ready function.It may cause readability problem.
Follow this link.
Multiple document.ready() function
I've got this function:
$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?
That is because you are using dynamic content.
You need to change your click call to a delegated method like on
$('.post_button, .btn_favorite').on('click', function() {
or
$("body").on( "click", ".post_button, .btn_favorite", function( event ) {
Instead of this:
$('.post_button, .btn_favorite').click(function() {
do this:
$(document).on('click','.post_button, .btn_favorite', function() {
on will work with present elements and future ones that match the selector.
Cheers
class-of-element is the applied class of element. which is selector here.
$(document).on("click", ".class-of-element", function (){
alert("Success");
});
If you know the container for .post_button, .btn_favorite then use
$('#container_id').on('click', '.post_button, .btn_favorite', function () { });
so if '.post_button, .btn_favorite' are not found then it will bubble up to container_id
else if you don't know the container then delegate it to document
$(document).on('click', '.post_button, .btn_favorite', function () { });
Reference
I am not sure if I am getting your question right but you may want to try..
$.ajax({
url: "test.html"
}).done(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
Just try to paste your code inside done function.
Hope it helps :)
EDIT:
I also notice you are missing }); on your question.
The following worked for me
$(document).ready(function(){
$(document).bind('contextmenu', function(e) {
if( e.button == 2 && jQuery(e.target).is('img')) {
alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.');
return false;
}
});
});
You need to bind the jQuery click event once your ajax content is replaced old content
in AJAX success block you need to add code like here new response html content one a tag like
Click Me
So you can bind the new click event after change the content with following code
$("#new-tag").click(function(){
alert("hi");
return false;
});
When a div is opnened i want to load html content into it via ajax. This is the code im working with:
http://jsfiddle.net/uhEgG/2/
$(document).ready(function () {
$('#country').click(function () {
$("#country_slide").slideToggle();
});
$('#close').click(function (e) {
e.preventDefault();
$('#country_slide').slideToggle();
});
});
The code I think I need is this:
$.ajaxSetup ({
cache: false
});
var ajax_load = "Loading...";
var loadUrl = "www.test.com/site.html";
$("#load_basic").click(function(){
$("#country_slide").html(ajax_load).load(loadUrl);
})
How can I make it work to make it load up when the div is opened by the code above, firstly because it is setup for a click function not a toggle function, and second, because the toggle doesn't seem to be able to distinguish if the div is open or not.
to make it load up when the div is opened by the code above
$("#country_slide").slideToggle(function(){
if($(this).is(':visible')){
$("#country_slide").html(ajax_load).load(loadUrl);
}
});
Try to delegate the events.. Looks like the element is not yet available in the DOm when the event is bound
Replace
$('#country').click(function () {
with
$(staticContainer).on('click', '#country', function () {
staticContainer is the element which is already in your DOM when the event is bound and the ancestor of country
Either store the slide state in a variable or in a data attribute liek this:
<div id="country_slide" data-state="1">
And make something like this:
$('#country').click(function () {
$("#country_slide").slideToggle();
if ($("#country_slide").attr("data-state") == 0)
$("#country_slide").html(ajax_load).load(loadUrl);
});
What I am trying to achieve is that whenever you click an image, it changes the window.location url, toggling it between '#' and '#footer'. Right now, all I have is this:
<script>
function clickarrow(){
var rd=Math.floor(Math.random()*11)
if (rd > 5){
window.location="#footer";
}
else{
window.location="#";
}
}
</script>
As you can see, this makes a 50:50 chance of either change being made. It works as a temparary fix, but sometimes you have to click up to 6 times for it to take effect.
Is there a way of doing this that properly toggles the window.location?
I am using jQuery 1.9.
If you're trying to reliably toggle the hash, rather than using a random chance, try something like this:
function clickarrow(){
var showFooter = true;
return function () {
if (showFooter) {
window.location.hash = "footer";
} else {
window.location.hash = "";
}
showFooter = !showFooter;
}
}
jQuery(function () {
jQuery('#myToggleLink').click(clickarrow());
});
Note: Normally when binding events, a function reference must be passed in. Here, I'm invoking clickarrow() since it returns a function by design. The returned function encapsulates the toggle variable via closure.
you can use data attribute to tell what is next step:
$('#arrow').click(function() {
if ($(this).data('footer'))
{
window.location="#footer";
$(this).data('footer', 'false');
alert('b');
}
else
{
window.location="#";
$(this).data('footer', 'true');
alert('a');
}
});
Have the following code:
$("#blogs").mouseover(
function () {
$(this).addClass("hover");
$("#home").removeClass("hover");
$("#homepages").removeClass("hover");
$("#apps").removeClass("hover");
$("#facebook").removeClass("hover");
$("#kontakt").removeClass("hover");
$("#content").hide().load("blogs.html", function(){
$("#content").show("slide");
});
});
Works all fine, but now I would like the load() / show() function only be called if #content does not already contain blogs.html.
In other words: I would like to check if blogs.html is already loaded and if yes, simply do nothing and only if not there yet I would load and show it.
Have tried some things with hasClass() and some if-formulas but struggle to get this check.
Tried stuff like this:
$("#content section").hasClass("check_blog").hide().load("blogs.html", function(){
$("#content").show("slide");
Basically I just need to know how I can check if blogs.html is already the contents of #content.
Thanks a lot for any help. Regards, Andi
Add an ID to some element in blogs.html, say blogsloaded, then you can check for it with:
if (!$("#blogsloaded").length)
$("#content").hide().load("blogs.html" ...
Another method would be to store in a variable if you already loaded it:
if (!this.blogsloaded)
{
this.blogsloaded=true;
$("#content").hide().load("blogs.html" ...
}
I would split up your mouseover events into two namespaced events. One which will only run once.
// This event will only run once
$("#blogs").on("mouseover.runonce", function () {
$("#content").load("blogs.html");
});
// because this event will unbind the previous one
$("#blogs").on("mouseover.alwaysrun", function () {
$(this).off("mouseover.runonce");
$(this).addClass("hover");
$("#home").removeClass("hover");
$("#homepages").removeClass("hover");
$("#apps").removeClass("hover");
$("#facebook").removeClass("hover");
$("#kontakt").removeClass("hover");
$("#content").hide();
});
Update a data attribute on #content that contains the url or id of the currently loaded content. Also, you should handle the case where the user hovers over a different section before the previous is done loading.
var request; // use this same var for all, don't re-declare it
$("#blogs").mouseover(function () {
// exit event if the blog is the current content in #content
if ( $("#content").data("current") == "blog") return;
$("#content").data("current","blog");
$(this).addClass("hover");
$("#home").removeClass("hover");
$("#homepages").removeClass("hover");
$("#apps").removeClass("hover");
$("#facebook").removeClass("hover");
$("#kontakt").removeClass("hover");
// if a previous request is still pending, abort it
if ($.isFunction(request.abort) && request.state() == "pending") request.abort();
// request content
request = $.get("blogs.html");
$("#content").hide();
// when content is done loading, update #content element
request.done(function(result){
$("#content").html(result);
});
});
I strongly suggest against using hover for loading content with ajax.
Also, in it's current form, this code is not very re-usable, you'll have to have one for each link. I suggest instead using classes and having only one event binding handling all of the links.
You can do it like this using .has() to detect descendants of content
$("#blogs").mouseover(
function () {
$(this).addClass("hover");
$("#home,#homepages,#apps,#facebook,#kontakt").removeClass("hover");
var $c = $("#content");
if($c.has('.check_blog')){ // if content contains an element with that class
$("#content").hide().load("blogs.html", function(){
$("#content").show("slide");
}
});
});
You could do something like this:
$("#blogs").mouseover(
function () {
$(this).addClass("hover");
$("#home").removeClass("hover");
$("#homepages").removeClass("hover");
$("#apps").removeClass("hover");
$("#facebook").removeClass("hover");
$("#kontakt").removeClass("hover");
if($('#content').html() == '') {
$("#content").hide().load("blogs.html", function(){
$("#content").show("slide");
});
}
});