How to change dynamically a href reference - javascript

I have a navbar, like this:
<a href="#head" class="navbar-icon iconactive" id="startIcon">
I dynamically create:
$(".content").append("<div id="1"><section class='section' id='head'>.....);
$(".content").append("<div id="2"><section class='section' id='head'>.....);
head is the id of the section that is currently displayed (I have 2 divs).
I want to dynamically change the navbar a href depending on the div that is currently displayed.

Use .toggle();
$(function() {
$('.toggle').on('click', function() {
$('.content1').toggle();
$('.content2').toggle();
});
});
.content2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Toggle
<div class="page">
<div class="content1">:)</div>
<div class="content2">:(</div>
</div>
http://jsfiddle.net/fmkaj81p/

I'm pretty sure that the best way to handle this is using
http://api.jquery.com/index/
I understood you establish the first div as visible, right? Then just when your event (might be a scroll or keyboard input or click ) to hide div and show other happens just add to your logic the a href update as something like
$("a").attr("href",$("newDiv").attr("id"));
Also go inside the next link to get your own working depending on your jQuery version
http://api.jquery.com/attr/

Related

jQuery show/hide on click in Wordpress

I have three buttons that change color when you hover (sprites) and I want to use those buttons so that when they are clicked on, different content will display.
I've gone through multiple tutorials / boards and nothing seems to work.
The buttons are displayed as follows:
<div id="buttons">
</div>
The divs where the content was placed (my last attempt) were as follows:
<div id="pages">
<div id="div1"><img src="..."></></div>
<div id="div2"><img src="..."></></div>
<div id="div3"><img src="..."></></div>
jQuery----
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attribute("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>​​​​
My anchors seem to be wrong. With this setup it just went to the top of the page. When using the anchor #1, #2, or #3 it would go to the div location but it would not hide or show the content. Frustrating.
The sprites are working fine. Now I'm trying to figure out how to make them clickable so that different content will display when each button is clicked (3 divs - under a parent div?). If anyone knows exactly how to do this I will be so thankful.
The content is largely images, and I am using Jupiter theme with a front-end editor so I don't know if it could be something with that. But nothing seems to be broken on the backend.
Also, if you can point me to a tutorial that will teach me how to make it so they animate in and out when clicked, that would be legit. Thanks again.
Check out my fiddle.
The code you posted had two main problems, confusing jQuery's data attributes with Javascript id's, and confusing the CSS selectors for classes (.) and ids (#). Here is the corrected html and javascript:
HTML
<div id="buttons">
Des
Brnd
Strt
</div>
<div id="pages">
<div id="div1"><p>This is 1</p></div>
<div id="div2"><p>This is 2</p></div>
<div id="div3"><p>This is 3</p></div>
</div>
Javascript
$("#pages div").hide();
$("a").click(function() {
var id = $(this).data("id");
$("#pages div").hide();
$("#div" + id).show();
});
you can Simple Use hide and show
Here Your Id for the button is Buttons
$("#ElementId" or ".Class").onClick(function(){
$("#OtherElement" or ".OtherElement").show()/hide()
});
You can Use .Toggle() to switch between states
so
$("#Buttons").click(function(){
$(".brnd").hide();
$(".des").show();
$(".Start").hide();
});
You can Also Use $("#Buttons").onclick(function(){ Instead of click depends on Your jquery version
See the Link May be you want this
Try this:
check tutorial here http://api.jquery.com/show/
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#f,#s,#t").hide();
$(".des").click(function(){
$("#f").toggle();
});
$(".brnd").click(function(){
$("#s").toggle();
});
$(".strt").click(function(){
$("#t").toggle();
});
});
</script>
http://jsfiddle.net/9SabV/
i have updated my answer as you updated your html,script code.
check this also
Use # for id and . for class.
http://jsfiddle.net/mdgd7/
There is only one issue I found in your code ie
$(".div" + id).show();
here instead of "."(dot), you have to use "#".
You have to replace it with this:-
$("#div" + id).show();
because you are using "id" in "div", not "class".
UPDATE
You have have to remove this:
$("#pages div").hide();
instead you have add this to css file:-
#pages div{display:none;}
Here is the updated js script:-
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr("id"); // Using a custom attribute.
//$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them
$("#div" + id).fadeIn(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
There are certain issues in you code. First of all you have not added data-id attribute to the anchor tags and tried referring them in you js code. The html5 "data-" attribute is used to store custom data inside the tag.The logic behind this is that any attribute with a "data- prefix" will not be processed and will be rendered as a data element.
Then the closures that you have added after the image tag are not necessary and syntactically wrong and is an error.
Here in your case, we can simply handle it with the "id" as there is not much need to use the data-attribute.
The simplified code will be like,
HTML
<div id="buttons">
ONE
TWO
THREE
</div>
<div id="pages">
<div id="div1">IMG 1</div>
<div id="div2">IMG 2</div>
<div id="div3">IMG 3</div>
</div>
JS
$("a").click(function() {
var id = $(this).attr("id"); //retrieving the id
$("#pages div").hide(); // hiding all elements
$("#div" + id).fadeIn(500); // showing the required one only
});
CSS
#pages div{
display:none;
}
Animations : I have added fadein animation. For simple fade in, fade out effects you can use jquery short hand animations like .slideDown() .fadeIn(), .animate(). There are more options available here : http://api.jquery.com/animate/
However you can add more customized animations using CSS3 animations which are more browser friendly. The criteria to choose is that, if you need more control over the animations and event tracking you can go for jQuery animations and otherwise CSS3 animations works like a charm.

jQuery set class not working after its already been set

trying to make a simple expanding heading script.
I don't wish to use accordions and just looking for a light weight home made solution. As i enjoy writing and learning things myself.
In my eyes, what i have should work. But it doesnt.
The aim is:
When a heading is clicked, all of the content is hidden and then the next content element after the heading is shown. This prevents more than one content being shown at any time.
After this, the div class gets changed to be a 'selected' state.
This works okay.
However, the next part runs if the heading class is the selected state, and if so it SHOULD change its class back to the normal and also hide the next element content.
The aim is to allow the hide / show options.
The latter part of changing back the class doesnt work however. I also know there is a much for efficient way of writing this, but not sure how.
JS:
$(function() {
$('.headingHelp').click(function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$('.headingHelp_sel').click(function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
});
Example HTML:
<p class="headingHelp">Content Heading</p>
<div class="infoHelp">
Content
</div>
<p class="headingHelp">Content Heading 2</p>
<div class="infoHelp">
Content 2
</div>
JSFiddle: http://jsfiddle.net/C7bHn/1/
Thanks in advance!
Since your "selected" class is added after the DOM is loaded, jQuery is not aware of it.
I suggest using jQuery's on() for delegated events. This will allow you to select dynamically generated classes:
$(document).on('click','.headingHelp',function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$(document).on('click','.headingHelp_sel',function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
Working Example (jsfiddle)
Edit:
Here's another method without using delegation. It just adds/removes a "sel" class rather than changing the class completely.
$('.headingHelp').click(function(){
// save clicked element in a variable for use below
$this=$(this);
// remove / add "selected" class
$('.headingHelp').removeClass('sel');
$this.addClass('sel');
// fade in / out content
$('.infoHelp').fadeOut();
$this.next('.infoHelp').stop().fadeIn();
});
.infoHelp {
display: none;
}
.headingHelp {
background-color:#999;
padding: 1%;
cursor: pointer;
color: white;
}
.headingHelp:hover,
.headingHelp.sel {
background-color:#666;
}
Working Example (jsfiddle)
jQuery selector working "AT CURRENT MOMENT" . Your selector $('.headingHelp_sel') empty when running this code.
Best code:
$(function() {
$('.headingHelp').click(function(){
var open = $(this).next('.infoHelp').is(':visible');
$('.infoHelp').fadeOut();
if(!open)
{
$(this).next('.infoHelp').fadeIn();
}
});
});

Toggle Image Source on Click

I'm trying to do a typical expand and collapse function to display/hide a div on image click.
Here's my HTML:
<div id="result_location">
<h3>Heading Text here</h3>
</div>
<div class="result_menu"></div>
And my JavaScript:
$('#result_location').click(function() {
$('.result_menu').slideToggle("slow");
});
So there's going to be an image within the #result_location div, that alternates between a plus/minus when the .result_menu gets toggled.
Hope that kinda makes sense!
Have wrote a fiddle for you.
Basically toggling the source will done the trick.
Here is the code
Html
<div class="msg_list">
<p class="result_location">Heading Text here<img src="http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif"></img></p>
<div class="result_menu">
This <br/>
is <br/>
a <br/>
Testing <br/>
Content
</div>
</div>
javascript
$(".result_location").click(function(){
$(this).next(".result_menu").slideToggle("slow");
})
.toggle( function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}, function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
check the fiddle here
Assuming I read correctly, your "trigger" is .result_menu. Here is a JSFiddle that accomplishes what I think you're looking for: http://jsfiddle.net/trevanhetzel/P4N2c/
Essentially, we bind to the trigger element using .on("click") and then find the image to toggle and .slideToggle it. Pretty straightforward.
$(function () {
$(".result_menu").on("click", function () {
$("#result_location img").slideToggle();
});
});
You'll also want to display: none the image in the CSS.
Am I missing anything about your desired outcome?
You could toggle a class on #result_location and then add the arrow image as a CSS background image for that selector. When clicked again the class would be removed, thus removing/changing the image.

Javascript click function not reacting in proper parent

I have this javascript that animates a div into a parent div.
Javascript
$(document).ready(function() {
$("a").click(function() {
var $righty = $(this).next();
$righty.animate({
right: parseInt($righty.css('right'),10) == 0 ?
-$righty.outerWidth() :
0
});
});
});
HTML
<div id="home" class="page">
<div id="page1">
Inside Div
</div>
Outside Div
<div id="page2" class="page">
content
</div>
</div>
I want the <a> tag to live in the page1 div. As of now, the Javascript only works when the <a> tag lives in <div id="page1">. I apologize if this is very basic, as I am new to Javascript. Thank you!
Use a selector for your a tag, instead of just a. Like a class or an id. You don't want this to happen to every single a tag, right?
Also, righty is getting NEXT...well, there's nothing next to the a tag you want to hit.
You want to do $(this).parent().next(); - no, see edit below. I am guessing, because you never told us what you wanted, exactly.
EDIT: This may not help at all. Just know that you can't have an a tag in a div, and call .next() - it has no siblings. .next() hits the next sibling. Not as it appears visually on the page, but as it exists in the DOM tree....you need to have a sibling in the div for the a tag to grab with .next().....you don't. Does that make sense? What exactly are you trying to animate?
EDIT EDIT: Tell me the id or class of the tag you want animated when a given a tag with a given class or id is clicked, and I'll show you how to do it.
EDIT EDIT EDIT: If you just want to make page2 animate when page1 > a is clicked, do this:
$('#page1 a').click(function(){ $('#page2').animate(...put animation stuff here...) });

jQuery toggle - Close all except this

I have found this code (jQuery):
$('.toggle').click(function() {
$('.container').eq($(this).index()).toggle('fast');
});
This is my HTML:
<h4 class="toggle">Title1</h4>
<h4 class="toggle">Title2</h4>
<h4 class="toggle">Title3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>
CSS
.container {
display: none;
}
I can toggle what I want with it.
The problem
When I click the toggle-class I want to close all open container-classes BUT NOT the current container-class (because it should be toggled).
The current container-class should toggle. That means that all elements could be closed BUT ONLY ONE could be opened at the same time.
I tried to just put jQuery hide before the script but that makes the container-class impossible to close (because when toggle hide is equal to show).
Code guess hide all .container except this
Using David's answer as a starting point, we can use .siblings to accomplish what you want:
$('.toggle').click(function() {
var index = $(this).index();
$('.container').eq(index).toggle().siblings('.container').hide();
});
See: http://www.jsfiddle.net/85zCp/
As an aside, you might want to use JavaScript to hide all elements initially instead of CSS because users with JavaScript disabled won't be able to see any content if you use CSS to hide them. Also, you would probably want to have each h4 heading in front of the contents instead of it put together like you're doing right now.
$('.toggle').click(function () {
$('.container').hide('fast');
$('.container').eq($(this).index()).show('fast');
});
I don't know exactly but I think this is what you're looking for...
Cheers...
This is a little verbose, but its use should be fairly obvious:
$('.toggle').click(
function(){
var index = $(this).index();
$('.container').hide().eq(index).show();
});
JS Fiddle demo.

Categories

Resources