I want to fade in the divs that pop up when you roll over an icon at my Tumblr theme I'm building, roseannebarr.tumblr.com. I don't know how to :(
P.S: If you get a "We'll be back shortly" try again in a few minutes, thats Tumblr being stupid :(
Here is how Tumblr works; Tumblr uses their own "tags" to create posts entered from a user's dashboard. You can post a link, photo, text, chat, video, or an audio. I only entered a photo post below. Outer is the icon you hover over (it also uses "block") and tooltip is the actual content itself. The reason you view the source on my page but can't see this is because the tags ARE the content.
<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
<div id="tooltip">
{LinkOpenTag}<center><img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" /></center>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
<img id="cover" src="http://static.tumblr.com/ux4v5bf/pMHledd2y/cover.png">
<img id="cover" src="http://static.tumblr.com/ux4v5bf/pMHledd2y/cover.png">
</div>
{/block:Photo}
</div>
I assume you are currently using jQuery's show() and hide() methods to work with the those divs.
Instead jQuery has a fadeIn() and a fadeOut() function which do exactly as they sound, you can find the docs for fadeIn here.
It takes a time in milliseconds as the first argument and an optional function to be called when the animation has finished as the second:
$('div#whatever').fadeIn(200, function() {
console.log('the fade has finished when this function is called');
});
$('#myIconId').mouseover(function() {
$('.mydivsClass').fadeIn(5000);
});
The one problem I see is that you have the same id on multiple elements on the page. W3C states one ID but multiple classes. You may have to do some refactoring to get the above to work. You need some way to match your icons up with an image, and typically that is what the id tags would do.
Related
While I have programmed in many languages, I'm a JavaScript newbie. Here is my situation.
A page is displayed. On this page is a photo gallery. A user clicks on one of these photos and a larger image is displayed. I need to get either the Id or title of the specific photo that was clicked on. I have done a LOT of Google searches and have tried a lot of different code snippets, but nothing has worked. I suspect because I'm that knowledgeable in JavaScript, I am probably applying various potential solutions the wrong way. I suspect the solution has to do with the onclick event.
PC
To answer your question with very little information and no source code to go from, I can only offer you this.
Updated your question with the relevant source code for a better answer.
onclick="YourFunction(this.id);"
Will fire a function called YourFunction and to get the ID you can:
function YourFunction(e){
// e= to the id of the element that fired the function
alert(e);
}
------ Demo Source Code ------
function GetId(e){
alert('ID= '+e);
}
<p><b>Click the image to get the ID</b></p>
<img height="70px" id="Click_Me_Button_One" src="http://www.skybondsor.com/wp-content/uploads/2011/08/click-me.png" onclick="GetId(this.id);"/>
<img height="70px" id="Click_Me_Button_Two" src="https://lh3.ggpht.com/vqKa5XeIG6W51gLV-wG_-DfX20FJxGxOw4-AoDQOJAzCqFeoED50-gabK94PFnWbHf8=w300" onclick="GetId(this.id);"/>
<img height="70px" id="Click_Me_Button_Three" src="http://www.dreems.org.in/click.jpg" onclick="GetId(this.id);"/>
Problem summary: Instead of doing what the code currently usually does - revealing content beneath the button - I need it to reveal content above it.
First of all I'm not versed in jQuery/Javascript in any sense, so if I'm asking for too much to be done on my behalf then please say so and hint toward the solution.
Now, onto the problem:
$('.drop_down_title').click(function() {
$(this).next('.toggle_panel').slideToggle('slow', function () { });
$(this).find('.arrow_drop_down').toggleClass('selected', function () { });
});
The code above is working fantastic to show content below a title (like having various 'related' blocks in the sidebar that you can hide/show).
However I've also planned to use the same mechanic for hiding portions of content that would be above the button, like so:
http://i.stack.imgur.com/B91DC.png
Where the buttons would be clicked to reveal more of the summary or bullet points.
I've tried tweaking the code to things that seem logical like:
$(this).previous('.toggle_panel')
In hope of it looking up the page for the relevant class, but still no dice.
Thank you for your time; any advice, help or solutions would be greatly appreciated.
Requested HTML (for the current working slide down):
<html>
<div class="slidebox">
<div class="drop_down_title">
<a class="arrow_drop_down">Button Click</a>
</div>
<div class="toggle_panel">
<p>This is some example content that should be hidden when the above button is clicked!</p>
</div>
</div>
</html>
I'm trying to get it so that the divs "drop_down_title" and "toggle_panel" are swapped. So that the content is being revealed above the button.
Perhaps .prev() is what you actually need. Not .previous. See JQuery Docs
Have a nice day, dear Programmers!
On G + is a block Posts; About; Photos; Videos
https://plus.google.com/109813896768294978296/posts
when you click for example on the About, there is a change at the bottom of div that contains a specific content. As I understand it, realize it is not difficult, but I'm afraid to write ten lines of code is very dirty because, in addition to jquery, because I am only a beginner. Can someone push on the right track, or to show where it has already been implemented in the demo with source code? Thanks!
<div id="109813896768294978296-posts-page" class="c-ha-If" role="tabpanel" aria-hidden="false">…</div>
<div id="109813896768294978296-about-page" class="c-ha-If c-ha-jb" role="tabpanel" aria-hidden="true">…</div>
There are two things occurring when you click on About from Posts. It appears to be adding and removing CSS classes dynamically. Which you can do with http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/.
As for loading data into a div from a URL, use http://api.jquery.com/jQuery.get/.
Once you've got the data, you can use http://api.jquery.com/html/.
If you've already loaded everything and want to achieve tab switching: http://jqueryui.com/demos/tabs/
At the moment i load default images for every picture in my app. I want to load the real picture of all images in div 5 if i click on any picture of div 5. At the moment i use the onclick event of the img tag with:
switchImg(this, "LINK_FOR_PICTURE")
my js snippet:
function switchImg(img, url){
$(img).attr("src", url);
}
At the moment it only loads the picture that i clicked on.
here the HTML snippet:
<div id="1">
</div>
<div id="2">
</div>
..
<div id="5">
<img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_1")" alt="No_picture">
</div>
<img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_2")" alt="No_picture">
</div>
<img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_3")" alt="No_picture">
</div>
.....
</div>
How do i need to change my code that following condition is true:
i click on any picture in div id=5 and all this pictures gets the correct picture link (LINK_FOR_PICTURE_1, LINK_FOR_PICTURE_2, etc) as src. The other pictures in the other divs don`t change and still display the default img. (Div id 5 is an example the same procedure should be possible for other divs with pictures).
Please keep in mind that the img link changes for every picture.
using only numbers for id is bad practice
your div id="5" is closed right after first image
you are using double quotes in double quotes in your example - bad idea
by calling switchImg(this, "LINK_FOR_PICTURE_3") using this, "this"
represents only clicked image. You would need something like
function switchImg(img){
$(img).closest('div').find('img').each(function(){
$(this).attr("src", $(this).attr('imglink'));
});
}
using html
<img src="DEFAULT_IMG" onclick="switchImg(this);" imglink="LINK_FOR_PICTURE_3" alt="No_picture">
Take advantage of jQuery and event delegation and observe when the div is clicked to then find all the images within that div and trigger the src change. To explain this better i've quickly thrown together an example on JSFiddle
http://jsfiddle.net/Phunky/EnhUE/
In my example you can either click images individually or the div for them all.
This will do it:
HTML
<div id="5">
<img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
<img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
<img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
</div>
JS
function switchImg(img){
img.attr("src", img.data('fullImg'));
}
$(function(){
var allImages = $('#5 img');
allImages.click(function(){
allImages.each(function(){
switchImg($(this));
});
});
});
HTML changes
I assume you want all the img tags wrapped in #5, no? Because your current HTML markup is invalid.
Additionally, ids can't technically start with a number. It probably won't cause a problem in most browsers, but it is invalid.
I'm using an HTML5 data-attribute to store the link for the picture. This will work even in non-HTML5 browsers. I'll get to this in a moment.
Finally, inline-JS is generally a bad idea because it is difficult to maintain. Using jQuery, it's very easy to bind code to the onclick event.
JS Changes
allImages.click() binds the code inside to the click event on any of the images.
The .each() function then loops over all those images, passing itself as a jquery object to the switchImg function.
My modified version of the switchImg function doesn't need a second parameter, because it can simply use the jQuery object to access the data-fullImg attribute. If using a version of jQuery prior to 1.6 (or something like that), using the .data() method in the way I did won't work. You'd instead need to use .attr('data-fullImg').
EDIT
In response to the OP's comment on this post:
$(function(){
$('img.showOriginal').click(function(){
$(this).parent().children().each(function(){
switchImg($(this));
});
});
});
This code assumes that you put the class"showOriginal" on every img tag, since I doubt that you truly want to apply this functionality to every single img tag on the page. Beyond that, we have this part: $(this).parent().children(). That simply traverses the DOM up to the parent element (#5, #2, whatever), and then back down to all the children (the images you want to change).
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