I am using this photo gallery from Codrops to display the images. Instead of manually inserting the image links into the html, I'm using a PHP script to display the images from a directory. I am trying to call the php script using jQuery - something like this:
HTML:
<div id="thumbsWrapper">
<div id="content">
<?php /* include_once('display.php'); */ ?>
<div class="placeholder"></div>
</div>
</div>
jQuery:
$('#content').load('display.php');
However, that breaks the gallery and although it displays the images, nothing happens when I hover or click on the image. Firebug throws the error:
no element found.
Where am I going wrong?
I believe load will replace the contents of #content, which includes <div class="placeholder"></div>. If that div is needed for the gallery then it won't work.
Something like this should fix it:
$.get('display.php', function(data) {
$('.placeholder').before(data);
});
In addition, make sure this call to load happens before you initialize the gallery. If you initialize the gallery first and then add these images, depending on how the gallery is coded, it may not work.
Finally, what was wrong with the approach of loading it through the php (I see you commented it out). Seems like a good way to go to me.
use livequery plugin for newly added dom elements to work and function the same. livequery
Related
I've looked around and tried a few things I've seen on here to try to fix this issue but I can't seem to find out why. I have five images in the toppic class. I want to be able to hover over an image in the toppic class and change the big image (id = Biggin) in my screen with the image that is being hovered over, and then change back to the default when the mouse leaves the image. Is there anything blatantly wrong? I copied and pasted from a previous working function and I'm not sure as to what I did wrong this time.
$(".toppic").hover(function() {
var imgsrc = this.src;
$("#Biggin").attr("src", imgsrc);
})
$(".toppic").mouseout(function() {
$("#Biggin").attr("src", ".//Images/IMG_3604.JPG");
})
I had similar issues when starting out using jQuery, and there could be a few reasons why your code isn't working as intended. The most common reason mine wasn't working is that the jQuery script element was getting activated before the DOM existed.
Make sure that the jQuery script element in your html file loads after your DOM loads. You can place the jQuery script element at the end of the HTML file so your jQuery would be loaded after the HTML loads.
I hope that helps.
Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!
When someone opens the page a <div> gets full width (1200px+). If I reload the page, the width is changed to the right one (550px). The browsers have their cache cleared, so this isn't a cache issue.
First visit:
After refresh:
This is a "custom HTML code" module in a Joomla 2.5 site. This is the code of divs that have their widths swapped:
<div class="art-nostyle">
<div class="custom">
<div id="script_nn_tabs54bfa417561de" class="script_nn_tabs" style="display:none;"></div>
<div id="nn_tabs_container_1____685___" class="nn_tabs_container outline_handles outline_content align_left nn_tabs_container_1_">
<div class="nn_tabs_nav" style="display: block;"></div>
At first sight I thought that the div id="nn_tabs_container_1____685___" was the problem, so I added this jQuery script at the end of the module :
var j = jQuery.noConflict();
j(document).ready(function () {
j("div[id^='nn_tabs_content_1____']" ).css("width","550px");
});
After it failed to fix it, I noticed that the problem was at the <div class="art-nostyle">. That div has no style at all! I can't use the above script for the art-nostyle div because it is added before every single module in the site. Could someone explain how it is possible when this probably isn't a cache issue - an element getting fixed width after a page refresh? I tried it on 5 different PCs that never visited the url before.
P.S. I can't recreate the problem in JSFiddle: that's why I didn't post a fiddle link.
Edit: Link of the site if someone want to check with his own eyes. Its the in middle of the index.
Edit2: I noticed that if i disable cookies the div wont change width after refresh. It will keep the full width.
If you're using jQuery, maybe you could remove the ".art-nostyle" class that may be inheriting weird styles from Joomla. You could give the one <div class="art-nostyle"> a unique ID (e.g. id="navigationLinks"), and then use this:
$(function() {
$("#navigationLinks").removeClass("art-nostyle");
$("#navigationLinks").css("width","550px");
});
You could also check to see if there's any other Javascript that references this div, because it seems weird that the problematic div would inherit the strange behavior just from HTML/CSS.
I had the same issue. However, I have found the answer. Use $(window).load() out instead of $(document).ready().
See also: window.onload vs $(document).ready()
I have a codeigniter that uses twitter bootstrap. At the end of it I have a simple fade in script using jquery:
<script src="http://localhost/b1/js/jquery.js"></script>
<script>
$(document).ready(function() {
$(".content").fadeIn(1000);
});
</script>
the HTML is here.
Now I copied the source from script code over from the page that it is working on to the one that is not working, and suspected 'content' is not declared on the non-working page.
to test this I ran $(".content").length; from the firebug console and the output is: 0 so apparently 'content' does not exist.
I want to pick another css selector to let the fade in script work, so I tried:
$(".html").fadeIn(1000); and $(".container").fadeIn(1000);
It's still not working. Can someone explain what I'm doing wrong and how to pick a selector which will fade in the entire page?
I have portions of the page generated dynamically by php ( codeigniter ) . Specifically, the header, navbar and footer
how about $("body").fadeIn(1000) for the whole page? Note no dot since it's the element name, not a class name.
You don't have a div 'content' in your html so it is never going to find it....
Try doing it on body or html e.g $(html).fadeIn(800) - nb without the full stop at the start
i need a code in Jquery for hide all images on all pages except the 'reCaptcha' thing.
The images of reCaptcha start with the link: 'google.com/recaptcha' or 'recaptcha.net' ...
My idea is to make the script that hide all images but not touch the images that contains the part 'recaptcha'.
Is possible to make in Jquery?
Thanks in advance and to all.
Kind Regards.
Luca.
Something like this?
$('img:not([src*=recaptcha])').hide();
First run $("img").hide(); then simply put an ID on the captcha tag and run $("#ID").show();
Or if you can't use an ID tag, cycle through all images in a loop and check what's in the src attribute, or even use a regex selector.
The ReCaptcha script puts all of its generated markup within a <div id="recaptcha_widget_div">
Having said that, you can grab all images except those within this DIV like this...
$("img:not(#recaptcha_widget_div img)").hide();
Or if that is too ugly, you can hide all images and re-show the ReCaptcha ones like this...
$("img").hide();
$("#recaptcha_widget_div img").show();