i have this code it works fine problem is i need to use it for 60 links
that wil make around 3600 lines of java script code just to be able to see hidden content for 60 divs
sorry it was late, so posted wrong code, it was not working,
forgot to mention my script is menu with two links about and help when page loads the link is shown but not the contens, instead it shows welcome message, when about is clicked it shows its content and when help is clicked it replace the contens with it
ok fixed my example works fine now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#welcome-content").show();
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#welcome-content").hide();
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#welcome-content").hide();
$("#help-content").show();
$("#about-content").hide();
});
});
</script>
<div id="anchor-div">
<a id="about-anchor" href="javascript:;">
About
</a>
</br>
<a id="help-anchor" href="javascript:;">
Help
</a>
</br>
</div>
<div id="content-div">
<div id="welcome-content">welcome to help system</div>
<div id="about-content">About=123</div>
<div id="help-content">Help=456</div>
</div>
jsfiddle demo here
Make use of the index of every li to show/hide the corresponding div:
$('#anchor-div a').click(function(e) {
e.preventDefault(); // Dont follow the Link
$('#content-div>div').hide(); // Hide all divs with content
var index = $(this).index('a'); // Get the position of the a relative to other a
$('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element
});
$('#anchor-div a').click(function(e) {
e.preventDefault(); // Dont follow the Link
$('#content-div>div').hide(); // Hide all divs with content
var index = $(this).index('a'); // Get the position of the a relative to other a
$('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element (skip welcome div)
});
#content-div>div {
display: none;
/* Hide all divs */
}
#content-div>div:first-child {
display: block;
/* Show welcome */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anchor-div">
About<br />
Help
</div>
<div id="content-div">
<div>Welcome!</div>
<div>About</div>
<div>Help</div>
</div>
This way you neither need ids nor classes
// Edit: I changed the answer to match the new question. I hide the divs using css (not as mentioned in the commets with js)
Related
I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});
Could you help me with this one please?
If you click on my hosting http://www.gosu.cz and select first image from top|left then it's gonna expand on top of the page with a additional info.
Header
Description
link
Now I need to set hidden value for each image which is defined as:
<li class="item col-xs-12 col-sm-6 col-md-4">
<a href="http://placehold.it/857x712" data-caption="description">
<img src="http://placehold.it/857x712" class="img-responsive" alt="alt" />
</a>
</li>
and when is selected then it's gonna show up at this div which is right below header:
<a href="LINK+KEYWORD">
<div class="least-preview"></div>
</a>
Any ideas how could I do that please? My poor skills in programing includes some basic of html, php but not scripting.
This is how it looks like: http://imgur.com/a/CU30N
Cheers,
Martin
So as David Arce suggested it might be done through alt value.
What I have done is using script at the start and also creating link for search queue:
<script>
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
</script>
Thanks to document.ElementById... I was able to set a href value via id to generated link.
<a id="link">
<div class="least-preview"></div>
</a>
I think you can use an tag like this inside the li tag
<input type="hidden" name="Image_details" value="Additional details offf that image">
And then on img onclick="getDetails();"
in js:
function getDetails()
{
div.innerHTML = document.getElementById("Img_details").value;
}
//The code is conceptual, so the idea is to assign the hidden input value to the when an image is clicked or selected
I am not quite sure what you are trying to hide, or what you want your code to do. If you want something to be hidden or visible you can use the visibility property in the css for the element you want to hide.
/* Hides h2 element */
h2 {
visibility: hidden;
}
/* Shows h2 element (default value)*/
h2 {
visibility: visible;
}
Here is the reference here...
http://www.w3schools.com/cssref/pr_class_visibility.asp
In enlightenment to what the question is, you can have an onClick="function()" attribute to your image which will grab whichever value, id, class, etc you have in your new which can be put into a search query by variable. All can be done through a function.
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
hello i have jquery tabs and want to access them from url using # but know know how can I full fill with it
requirement is mywebsite.com/#show_page1 will show the page 1 content
and if access from mywebsite.com/#show_page2 will show the page 2 content
here is the my js code
$(window).load(function(){
$(document).ready(function(){
$("#nav_tabbed a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #show_"+id[1]).fadeIn();
// remove classes from all
$("a").removeAttr("style");
// add class to the one we clicked
$(this).css("background-color","#1aaede");
// stop the page from jumping to the top
return false;
});
$("#menu_container #show_page1").show();
});
});
and html i have is
<div id="nav_tabbed">
<a id="show_page1" style="background-color:#1aaede;">Page 1</a> <a id="show_page2">Page 2</a>
</div>
<div id="menu_container">
<div id="show_page1">
<!-- content here -->
</div>
<div id="show_page2">
<!-- content here -->
</div>
</div>
location.hash; will give you the hash value added in the addressbar and you can use it the way you need to. My suggestion is added below.
What seems to me you want to hightlight your link with the hash located in the browser's addressbar and respective div you want to show. If this is what you want to implement then you can try this with slight changes in the markup and js:
CSS:
.active {
color:red;
}
#menu_container div {
display:none;
}
HTML:
<div id="nav_tabbed">
<a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar-->
Page 2
</div>
<div id="menu_container">
<div id="show_page1" style='display:block;'>Page 1</div>
<div id="show_page2">Page 2</div>
</div>
JS:
$(function () {
// below works for hash added in the browser.
var hash = location.hash;
if(hash.length){
$('#nav_tabbed a').removeClass('active');
$('#menu_container div').hide();
$('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
$('#menu_container div[id*="' + hash.slice(1) + '"]').show();
}
$(document).scrollTop(0);
// below works for click of the anchors
$('#nav_tabbed a').click(function(e){
e.preventDefault();
$(this).addClass('active').siblings('a').removeClass('active');
$('#menu_container div').hide();
$('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
});
});
A sample fiddle.
your posts shows a little confusion on the topic.
so first for explanation:
there are two meanings of a #
in a url, the # is a reference to the location hash.
in jquery, the # is a reference to an element id.
you want to use the hash change in this case.
first of all... why do you wrap the window.load around the dom.ready event?
as far, as i understood, jquery's dom ready fires when the dom is ready, jquerys window.load fires, after all images, iframes, plugins etc. have been loaded. so a dom.ready inside a window.load is kind of unnecessary ...
next: ID's have to be unique - you can't give your anchor the same id as the assigned div!
so let's get down to business - the html:
<div id="nav_tabbed">
Page 1
Page 2
</div>
<div id="menuContainer">
<div id="page1" class="contentTab activeTab">123</div>
<div id="page2" class="contentTab">456</div>
</div>
we use activeLink and activeTab classes to determine which tab is currently open
the css just sets the background of the activeLink:
.activeLink {
background-color:#1aaede;
}
the js:
$(window).load(function(){
$(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one
$("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color
$(".activeLink").removeClass("activeLink");
$(this).addClass("activeLink");
})
if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab
{
$(".activeTab").hide();
$(location.hash).show().addClass("activeTab");
}
});
//our hashchange event handles the loading of the desired tabs:
window.onhashchange = function () {
if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(location.hash).show().addClass("activeTab"); //show the clicked tab
}else //and per default show the first tab
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(".contentTab:first").show().addClass("activeTab"); //show the clicked tab
}
};
http://jsfiddle.net/ex46ndg1/3/
I'm trying to have a Div fade in after the user clicks two other divs.
This is what I have so far but I'm pretty sure I'm doing something wrong. I can't seem to get the div to fade in even if only one div is clicked let alone two. Any help would be appreciated! thank you so much.
<script>
$(document).ready(function(){
$('#video_overlays').hide();
$('#video_overlays').fadeIn(9000);
$('#video_overlaysanswer').hide();
$('#video_overlaysanswer').fadeIn(18000);
$('#video_overlaysanswer1').hide();
$('#video_overlaysanswer2').hide();
$('#video_overlaysanswer2').fadeIn(18000); });
</script>
<script type="text/javascript">
$(document).ready(function(){
$("video_overlaysanswer").click(function() {
var index = $(this).closest("li").index();
$("video_overlaysanswer1").eq(index).fadeIn("slow");
return false; // prevents navigation to #
});
})
</script>
<div id="video_overlays">
This is where text is
</div>
<div id="video_overlaysanswer">
answer 1
</div>
<div id="video_overlaysanswer2">
answer 2
</div>
<div id="video_overlaysanswer1">
the answer that I want to fade in once the other two div's are clicked
</div>
$(document).ready(function(){
$('#video_overlays').hide();
$('#video_overlays').fadeIn(500);
$('#video_overlaysanswer').hide();
$('#video_overlaysanswer').fadeIn(500);
$('#video_overlaysanswer1').hide();
$('#video_overlaysanswer2').hide();
$('#video_overlaysanswer2').fadeIn(500);
$("#video_overlaysanswer,#video_overlaysanswer2").click(function() {
$("#video_overlaysanswer1").fadeIn("slow");
return false; // prevents navigation to #
});
});
Try code above.It works fine.Now implement different click event fo buttons.hope this helps.
http://jsfiddle.net/szr9vpv5/
$(document).ready(function() {
$('div.post').click(function() {
// the clicked LI
var clicked = $(this);
// all the LIs above the clicked one
var previousAll = clicked.prevAll();
// only proceed if it's not already on top (no previous siblings)
if(previousAll.length > 0) {
// top LI
var top = $(previousAll[previousAll.length - 1]);
// immediately previous LI
var previous = $(previousAll[0]);
// how far up do we need to move the clicked LI?
var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');
// how far down do we need to move the previous siblings?
var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());
// let's move stuff
clicked.css('position', 'relative');
previousAll.css('position', 'relative');
clicked.animate({'top': -moveUp});
previousAll.animate({'top': moveDown}, {complete: function() {
// rearrange the DOM and restore positioning when we're done moving
clicked.parent().prepend(clicked);
clicked.css({'position': 'static', 'top': 0});
previousAll.css({'position': 'static', 'top': 0});
}});
}
});
});
How can I move a div to the top of a list of divs upon clicking a link.
eg;
<div id=1>Div One <a>Click to update</a><a>a different link</a></div>
<div id=2>Div One <a>Click to update</a><a>a different link</a></div>
<div id=3>Div One <a>Click to update</a><a>a different link</a></div>
<div id=4>Div One <a>Click to update</a><a>a different link</a></div>
<div id=5>Div One <a>Click to update</a><a>a different link</a></div>
and when you click ONLY on the link "CLICK TO UPDATE" for any div, it should move that div to the top of the page!
80% done. Thanx guys for the swift response. Preciate it to the max. Anyways thanx to #valipour I managed to get the div to move ONLY when you click on a specific link by adding a class to the link and changing my first two lines from;
$('div.post').click(function() {
// the clicked LI
var clicked = $(this);
to;
$("a.rep").click(function() {
var clicked = $(this).closest("div.post");
html code is;
<div id="wrapper">
<div class="post"><a class="rep">1 Aasdjfa</a> <a>6 Aasdjfa</a></div>
<div class="post"><a class="rep">2 Aasdjfa</a> <a>7 Aasdjfa</a></div>
<div class="post"><a class="rep">3 Aasdjfa</a> <a>8 Aasdjfa</a></div>
<div class="post"><a class="rep">4 Aasdjfa</a> <a>9 Aasdjfa</a></div>
<div class="post"><a class="rep">5 Aasdjfa</a> <a>10 Aasdjfa</a></div>
</div>
Thanks!
BUT it doesn't work with div's that were dynamically loaded? eg. I have 10 divs showing by default then I have a script that loads more divs when you scroll...this script won't move the divs in the autoload section when you click on any of them...any idea why???
If you put them all inside another wrapper div you could do
(This is now the most upto date version):
$("#wrapper a.rep").live('click', function(){
$(this).parents('.post').hide().prependTo("#wrapper").slideDown();
});
EDITED my answer. This one works. With animation aswell ;).
If you dont like animation, have just $(this).parent().prependTo("#wrapper") **
http://jsfiddle.net/2DjXW/18/
To load Divs that are dynamically added afterwards, you will have to use the 'live'. When document is ready the divs that are not there cannot have events added. But live adds the events when new are dynamically added.
New edit:
http://jsfiddle.net/tVhqz/8/
Should work now well.
give "update" class to those links that you want to do the action and then:
$("a.update").click(function()
{
var myparent = $(this).closest("div");
var parentparent = myparent.parent();
myparent.detach().prependTo(parentparent );
return false;
});
jsFiddle link: http://jsfiddle.net/g56ap/4/
NOTES:
we are keeping parentparent separately because myparent.parent() would be invalid after detach.
Ok so through a combination of #valipour and #pehmolenu scripts I was able to get what I was looking for. I have tested it only on chrome but am sure it should work on other browsers. The complete working code is below.
Javascript;
$("#wrapper a.rep").live('click', function(){
$(this).parents('.post').hide().prependTo("#wrapper").slideDown();
});
html;
<div id="wrapper">
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
</div>
This will also work if you divs are loaded dynamically based on scroll!
Thanx guys! See it in action at repjesus.com! click "rep it" on any item!