display different text on different links - javascript

In this when i click on photos the target div gallery gets displayed.I want to display the target div with some effects like ease-in or ease-out or slide effects etc. so that it looks more attractive.Initially the target div gallery is not displayed as in css there is display:none for gallery.I also tried the transition property for this but its not working.So plz help me with this.
<div>
<ul id="nav">
<li>Home</li>
<li id="gallary">Photos</li>
</ul>
</div>
<div id="gallery">
<h3 style="font-family:'Comic Sans MS';color:white;font-size:25px;text-align:center;font-weight:bold;">GALLARY</h3>
<div id="gallary_images"><img src="slide1.jpg"/></div>
<div id="gallary_images"><img src="slide3.jpg"/></div>
<div id="gallary_images"><img src="slide4.jpg"/></div>
<div id="gallary_images"><img src="slide5.jpg"/></div>
<div id="gallary_images"><img src="slide1.jpg"/></div>
<div id="gallary_images"><img src="slide5.jpg"/></div>
</div>
the CSS for this is
#gallery:target
{
display:block;
}
#gallery
{
border:solid black thin;
display:none;
position:absolute;
}

It sounds like this jQuery function is suitable for your needs:
http://api.jquery.com/fadeIn/
There is an example on the above page, which I've modified for you to try out:
$( "#gallary" ).click(function() {
$( "#gallery" ).fadeIn( "slow", function() {
// Animation complete
});
});
I've assumed you want to click on <li id="gallary">Photos</li> to make the contents of appear.
If I may add a couple of further comments - try renaming your element ids to be more descriptive, and to be aware you've used both 'gallary' and 'gallery' spellings which makes it hard to read. Also, a single id should be unique, whilst the same class can be used multiple times.
Finally - don't use comic sans! :D
Edit: I've added your extra requirement to close on backspace:
$('html').keyup(function(e){if(e.keyCode == 8)
$( "#gallery" ).fadeOut( "slow", function() {
// Animation complete
});})
As I mentioned in comment 8 = backspace, 36 = escape key.

Related

jQuery click event seems to be kind of late

I'm working on a Facebook reaction bar so it is pretty hard to copy the code here because it has a lot of events binded but all of you got facebook so if you want to check it by yourself - please do it.
The thing is that I managed to move the reaction bar under the react root and now I wanted to make the clicked reaction counter change the background color of itself to green.
And everything is working almost good excluding one thing: it is one click behind. To make you understand better I recorded little example how it looks. The red pulse ring appears when I click: https://vid.me/HqYp
Here is the changing code:
$(this).find('div._iu-[role="toolbar"]').bind('click',function(){
$(this).find('p.counter').each(function(){$(this).css('background-color','#48649F');});
$(this).find('span[aria-pressed="true"]').find('p.counter').css('background-color','green');
});
$(this) is div[id*="post"] so in $(this) I'm getting div with the whole post.
I thought that maybe I should use a callback function after changing-every-counter-to-default-color function but I don't know am I right and if it's right solution.
Thanks from above. (:
You can probably simplify this a bit. Although without the html structure I can't know for sure how the layout of the function works with respect to the event origin. Also I am not sure when the aria-pressed is set to true so I made the function a bit more generic. You simply add a data attribute to target the span you want to be targeted by the click.
<div class="_lu-" role="toolbar" data-target=".facebook-counter">
Later in your javascript you do the following
var $t = $(this);
var $t.target = $(this).data('target');
$t.on('click','div._lu-[role="toolbar"]', function() {
$t.find($t.target).css({
'background-color':'green'
}).siblings().css({'background-color','#48649F'});
});
This code is assuming first that your spans are in the same container, and second that the first $(this) refers to the parent container of this whole toolbar, and last that you have put data-target="" attributes with selectors for the appropriate target you want to affect.
This is a sample:
$(document).ready(function(){
$('.toolbar').on('click','.toolbar-item .icon', function(event) {
event.preventDefault();
event.stopPropagation();
if(!this.$) this.$ = $(this);
if(!this.parent) this.parent = this.$.parent();
if(!this.counter) this.counter = this.$.siblings('.counter');
this.parent.addClass('selected').siblings('.selected').removeClass('selected');
var count = this.counter.data('value');
count++;
this.counter.data('value',count);
this.counter.html(count);
});
});
.toolbar {
font-size:0;
text-align:center;
}
.toolbar-item .icon {
background:#FFF;
padding:30px;
border:1px solid #AAA;
border-radius:100%;
margin:0 20%;
transition:0.8s ease all;
}
.selected .icon {
background:#369;
}
.toolbar-item .counter {
background:#E0E0E0;
margin:0 10px;
transition:0.4s ease background;
}
.selected .counter {
background:#509050;
}
.toolbar-item {
font-size:10pt;
width:25%;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolbar">
<div class="toolbar-item">
<div class="icon">Like</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Wow</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Sad</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Angry</div>
<div class="counter" data-value="0">0</div>
</div>
</div>
As of jQuery 1.7 they introduced the .on('click', function().... method. Try that instead and see if you get the same results.
Quick answer without having tested or the time to test your code. I recently had a performance issue with a nested function, so maybe look at that second line with the .each() method.

How can i find element which is below to the another element?

I am trying to drag and sort images using jquery UI. I have cloned element which is I am trying to drag. I need to show a line between two images based on cloned image position. How can I achieve this? Thanks in advance.
Here is the one example.
http://jsbin.com/owuxek/9/edit?html,js,output
I am showing images instead of "Item A Item B.." Now I need to show a line between two li's while one 'li' is moving.
EDIT: That is, when I click "and pick" an image and hover it onto the list of images already in place, I wish to show a 'separator line' between the images over which I am currently hovering, so as to indicate to the user where the image would be placed if user releases the mouse click.
In the attached JSbin code, when I move an element from the list above and try to move it into the list below, a small white separating space appears between the elements of the list below, over which the mouse hovers. I need to replicate this effect for the below element layout.
<div id="single_album_grid" class="sortable">
<div id="divId1">
<img class="assetImg" id="imageId1" src="url">
</div>
<div id="divId2">
<img class="assetImg" id="imageId2" src="url">
</div>
<div id="divId3">
<img class="assetImg" id="imageId3" src="url">
</div>
</div>
This is my updated code:
$( "#divId1" ).draggable({
containment: $('#single_album_grid'),
helper: 'clone'
});
$( "#divId1" ).droppable({
drop: function(event, ui) {
}
});
If you use jquery UI sortable widget, it automatically inserts a placeholder element to at the target position.
You can style it like a line or whatever else you want with .ui-sortable-placeholder selector via css.
$(function() {
$("#single_album_grid").sortable()
});
div div {
height: 50px;
background: dodgerblue;
border: 2px solid white;
}
.ui-sortable-placeholder {
visibility: visible !important;
height: 5px;
background: hotpink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="single_album_grid" class="sortable">
<div id="divId1">
<!--img class="assetImg" id="imageId1" src="url"-->
</div>
<div id="divId2">
<!--img class="assetImg" id="imageId2" src="url"-->
</div>
<div id="divId3">
<!--img class="assetImg" id="imageId3" src="url"-->
</div>
</div>
over: function (event, ui) {
//code here
}
out: function (event, ui) {
//code here
}
worked for me!!

Make div visible at a location on the page

Basically I am looking for a code that makes a div visible on a certain location on the webpage. when you scroll trough the website you get at certain headings when you are at a specific heading the div needs to get visible in the navbar.
The div #greybar is the div that needs to get visible only on a certain location while scrolling, the whole navbar is fixed
HTML:
<div class="navbar">
<div class="container">
<div class="logo">
<img src="images/logotekst.png">
</div>
<div id="menubutton"><a onclick="playclip();" href="#homejump">Home</div>
<div id="menubutton"><a onclick="playclip();" href="#aboutjump">About</div>
<div id="menubutton"><a onclick="playclip();" href="#infojump">Info</div>
<div id="menubutton"><a onclick="playclip();" >test</div>
</div>
<div id="greybar"></div>
</div>
CSS:
#greybar {
width: 100%;
height: 5px;
background-color: #A4A4A4;
}
If you are using javascript and jQuery, you can have a look at jQuery functions
hover, show, hide, text. At the end of all pages, there are good examples.
EDIT: You should rather use class="menubutton" and not id="menubutton".
After that, you can use script like
<script>
$( "div.menubutton" ).hover(
function() {
$( "#greybar" ).text( $( this ).text());
$( "#greybar" ).show();
}, function() {
$( "#greybar" ).hide();
$( "#greybar" ).text("");
}
);
</script>
EDIT 2:
add to greybar class position: fixed;

Change image source on mouseover of parent div element

I have an image and rollover image. Using jQuery or CSS, I want to show/hide the rollover image when the onmousemove/onmouseout event happen on the parent div (containing the image).
How can I do it?
Edit: HTML posted below by request. Not relevant to the question, but as an FYI HTML is built on a 30 column fluid grid.
Upon hover of the top div (row-fluid) the image (image.png) should change to a different source image (imagehover.png).
<div class="row-fluid" style="padding-top:1em">
<div class="span4">
//Random content
</div>
<div class="span8 offset1">
//Random content
</div>
<div class="span9 offset3">
<ul>
<li>//Random content</li>
<li>//Random content</li>
<li>//Random content</li>
</ul>
</div>
<img src='../../images/image.png>
<div>
You want to do something like this: full_path_to_css parent:hover child
full_path_to_css parent:hover child {
styles for your item
}
eg:
html (the div.img can be anything):
<div class="parent">
<div class="img">
</div>
</div>​​​​​​​​​​​​​​​​​​
css:
div.​parent​ {
width:200px;
height:200px;
background-color:red;
}
div.img {
width:100px;
height:100px;
background-color:blue;
}
div.parent:hover div.img {
background-color:green;
}​
if you want to test check here: http://jsfiddle.net/NicosKaralis/kd6wy/
just to remember, the div with img class can be any element, doesn't need to be div and you can change the css styles as you wish, the only thing you need to watch is the parent:hover child
EDIT
Just to clarify one thing: the item with :hover is the parent on witch you want to detect the hover action, and the child is the item on witch you want to change the css rules
EDIT AGAIN
<div id="parent" class="row-fluid" style="padding-top:1em">
<div class="span4">
//Random content
</div>
<div class="span8 offset1">
//Random content
</div>
<div class="span9 offset3">
<ul>
<li>//Random content</li>
<li>//Random content</li>
<li>//Random content</li>
</ul>
</div>
<img class="child" src='../../images/image.png>
<div>
on your code you will need:
div#parent.row-fluid img.child {
display:none;
}
div#parent.row-fluid:hover img.child {
display:block;
}
this will make your image only show up if the mouse is over your div
Should just be as easy as attaching a mouseover and mouseout event handlers to the parent div and then manipulating the containing img element.
var rolloverImage = ...
var origImage = ...
$("#parentDivId")
.mouseover(function() {
$("#parentDivId img").attr("src", rolloverImage)
})
.mouseout(function() {
$("#parentDivId img").attr("src", origImage)
})
Try:
$('div.row-fluid').hover(function() {
$(this).find('img').attr('src', 'http://dummyimage.com/100x100/000/fff');
}, function() {
$(this).find('img').attr('src', 'http://www.placekitten.com/100/100');
});​
jsFiddle example
Without having any html to test with, this is just something I thought up in my head. Not sure if it will work or not, but I don't see why it wouldn't.
$('div').mouseenter(function() {
var image = $('img', this);
$(image.attr('src', 'new-image-src.jpg');
}).mouseleave(function () {
var image = $('img', this);
$(image).attr('src', 'old-image-src.jpg');
});
You can use this code to "show/hide the rollover image"
#parentDiv > img {
display: none;
}
#parentDiv:hover > img {
display: block;
}
The > allows you to select img tags that are the direct descendents of #parentDiv (I gave the outer div that ID). Then we're just setting a different style for it on regular and hover states.
Answering my own question, as I used elements of others' comments and answers to create a hybrid: a sprite, totally CSS solution. I find this to be optimal.
Per #gilly3 "Image swaps are best done with a sprite, so that there is never any delay switching between the images. Put both versions of the image side by side in a single file. Set that image to be the background of a div, and adjust the background position to display one or the other image." For this example, I will use a 96px (height) by 27px (width) sprite, using my em values.
In HTML replace img line with:
<div class="sprite-image"></div>
CSS:
.sprite-image {
{
background-image: url(../../images/image.png);
height: 3.7em;
width: 27px;
}
.row-fluid:hover .sprite-image
{
background-position: 0px -3.7em;
}

javascript,css,html dropdown menu mouseover

I have used javascript on a menu so that when I mouseover it should drop down. But instead of only the menu dropping down, the footer and the menus are coming down too.
CSS:
.navmenu {position:relative;float:left;cursor: pointer;margin-right:2px;width:200px;min-width:200px;}
.navmenu a{top:0px;left:0px;padding: 0;color: #000;text-decoration: none;position:relative;}
nav .wrapper{width:150px;min-height:128px;display:block;}
ul.subnav {top:0px;padding: 0px 5px 5px 15px;margin: 0px;list-style: none;position: relative;max-width: 150px; width: 150px; left: 0; display: none;z-index:150; }
ul.subnav li{padding:5px; width:120px;text-decoration: none;}
.imagem1{top:0px;left:-15px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem3{top:0px;left:-15px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem2{top:-3px;left:-3px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem4{top:-3px;left:-20px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem5{top:1px;left:-44px;margin:0;padding:0;position:absolute;z-index:180;}
.menuname{min-height:40px;z-index:150;}
.menuname img {border:0;}
#placaparque{left:20px;top:-17px;z-index:150;}
#placainfo{left:-15px;top:-10px;z-index:150;}
#placacons{left:-15px;top:-5px;z-index:150;}
#placaactiv{left:-10px;top:-8px;z-index:150;}
#placaanim{left:-65px;top:-6px;z-index:150;}
1#sub1{left:0px;top:0;}
1#sub3{left:0px;z-index:150;}
#fundo1{position:relative;background-image:url('images/fundo.png');left:38px;width:150px;min-height:128px;}
#fundo2{position:relative;background-image:url('images/fundo.png');left:0px;width:150px;min-height:128px;}
#fundo3{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}
#fundo4{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}
#fundo5{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}
#parq{left:-20px;}
#acti{left:-30px;}
#info{left:-65px;}
#cons{left:-110px;}
#anim{z-index:100;left:-155px;}
HTML:
<nav id="mainMenu">
<div id="parq" class="navmenu" >
<div " id="wrapper" class="wrapper">
<div id="fundo1" class="fundo">
<ul id="sub1" class="subnav">
<?php /*wp_list_categories('include=16');*/ ?>
<?php wp_nav_menu( array( 'menu' => 'Menu Parque' ) ); ?>
</ul>
</div>
<img class="imagem1" src="<?php bloginfo('template_directory'); ?>/images/comboioparque.png"/>
</div>
JavaScript:
$(function () {
var divnav = $(this); //menu1
$("#parq").hover(function () {
$("#sub1").stop(true, true).delay(200).slideDown(300);
$(".imagem1").stop(true, true).fadeOut(200);
}, function () {
$(".imagem1").stop(true, true).delay(200).fadeIn(200);
$("#sub1").stop(true, true).slideUp(300);
});
I only want the to menu drop down. I don't want the rest of the menus under and footer coming down too. I know it has something to do with "z-index" but I'm not following.
Can yall help me?
Thanks.
First of all, notice that you are having an error in this line of the css:
1#sub1{left:0px;top:0;}
it should be like this:
#sub1{left:0px;top:0px;} /*and by the way, why have you added a number one before the id??*/
You also have an error in this line of the html:
<div " id="wrapper" class="wrapper">
it should be like this:
<div id="wrapper" class="wrapper">
in the css of .navmenu why are you defining a with and ALSO a min-width?? Im not sure if that would validate for W3C...maybe it can cause you css conflicts
If you are calling both of them in order to view it right in IE6 I would recomend you to use a hack for width and for all the other browsers just leave the "min-width".
And finally one curious question: in the jquery, why are you using a .stop method? Why dont you just use an .animate method?? You could do something like this:
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"300px"});
});
$("#btn2").click(function(){
$("#box").animate({height:"100px"});
});
});
I hope something of all this things may help you. Besides, in the jquery you are ONLY calling the #sub1 and not others so the jquery I think should work well.
If you are still having problems, let us know... because as far as I understand I only found those details.
Regards,

Categories