I have an array of links that when clicked will bring up a hidden div with information related to it. Each link, when clicked, will bring up a different div associated with it. I'm trying to make an image (closelabel.png) on every div with the class 'countystats' act as a close button to hide the divs. I can't get the image in every div to act as a clickable link yet. More importantly, when I click on link one nothing happens. When I open up two hidden divs and try to close one, the opposite one closes (if I click on 'one' and 'two' to make the divs appear, and then I lick on the "a" (for purposes of a closing link) the opposite div is closed. So the button for two closes one.
<style type="text/css">
.county{
color:blue;
display:block;
}
.countystats{
background-image:url('../../../../../closelabel.png') ;
background-position:top right;
border:3px black inset;
background-repeat:no-repeat;
background-color:#ccc;
display:none;
right:250px;
margin: 5px 5px 5px 5px;
padding:5px 5px 5px 5px;
width:200px;
}
</style>
<div style="height:250px;bottom:300px; width:100px; padding: 1em; overflow:auto; margin:5px 5px 5px 5px; border: 2px black; overflow-x:hidden;">
<a class="county" href="#">one</a>
<a class="county" href="#">two</a>
<a class="county" href="#">three</a>
<a class="county" href="#">four </a>
<a class="county" href="#">five</a>
<a class="county" href="#">six</a>
</div>
<div class="countystats">stats one<p>woot</p><a class="closediv" href="#">a</a></div>
<div class="countystats">stats two <a class="closediv" href="#">a</a></div>
<div class="countystats">stats three</div>
<div class="countystats">some other stuff</div>
<div class="countystats">even more other stuff</div>
<script type="text/javascript">
$('a.county').each( function(e){
$(this).bind('click', function(e){
var thisIs = $(this).index(); $('.countystats').eq(thisIs).show (250);
});
});
$('a.closediv').each( function(e){
$(this).bind('click', function(e){
var toClose = $(this).index(); $('.countystats').eq(toClose).hide(250);
});
});
</script>
jsfiddle demo
Your problem is a bit of confusion about what this is in the click handler in here:
$('a.closediv').each( function(e){
$(this).bind('click', function(e){
var toClose = $(this).index();
$('.countystats').eq(toClose).hide(250);
});
});
You're calling index on the <a> that you're using to hide the <div> rather than on the <div> itself.
The simplest solution is, as other people have noted, to use closest:
$('a.closediv').click(function(e) {
$(this).closest('.countystats').hide(250);
});
No one else noticed what the real root of your problem was so I thought I'd mention it.
You are trying to bind event handlers incorrectly (for what you want the code to do). Also, just use .closest() to figure out which element to hide.
$('a.county').click(function(e) {
var thisIs = $(this).index();
$('.countystats').eq(thisIs).show(250);
});
$('a.closediv').click(function(e) {
$(this).closest('.countystats').hide(250);
});
http://jsfiddle.net/mattball/tbNvn/4/
Just use parent():
$('a.county').click(function(e) {
var thisIs = $(this).index();
$('.countystats').eq(thisIs).show(250);
});
$('a.closediv').click(function(e) {
$(this).parent().hide(250);
});
Related
I'd like to make some (let's say 2) links that will trigger a specific to appear by sliding up , then another link that will trigger the specific to huide by sliding down.
The links are generated dynamically by a certain application (something like looping which I personally don't understand)
After researching in this site, I tried the code below but found some problems:
only the first link for sliding up worked well, other blue links didn't work
Current script is sliding up and down the content for each click on the blue link.
I can't figure out how to break apart the script so I can apply sliding up script only for the blue links and the sliding down script for the red link.
to be noted, the blue links are dynamically generated based on a certain application loop, so practically there is no fix number for the amount of the blue links being displayed.
This is the code :
$(function(){
var list = $('#slidingcontent'),
button = $('#triggerup'),
speed = 500;
list.hide().css('bottom', button.css('top'))
.css('margin-top', list.outerHeight() * -1);
button.toggle(function(e) {
e.preventDefault();
e.stopPropagation();
list.slideDown(speed);
},function(e){
e.preventDefault();
e.stopPropagation();
list.slideUp(speed);
});
});
#slidingcontent{
position:absolute;
}
.linkcontainer{
text-align:center;
}
.sliding_up_link a, .sliding_down_link a, #slidingcontent{
color:white;
margin: 1px;
padding: 1px;
text-decoration:none;
font-weight:bold;
}
.sliding_up_link a{
background:blue;
}
.sliding_down_link a{
background:red;
}
#slidingcontent{
background:green;
}
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<div class= "linkcontainer">
<span class="sliding_up_link" id="triggerup" >
<a href ="#">
triggerup1 (for sliding upward)</br>
the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
</a>
</span>
</div>
<div class= "linkcontainer">
<span class="sliding_up_link" id="triggerup" >
<a href ="#">
triggerup2 (for sliding upward)</br>
the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
</a>
</span>
</div>
<div class= "linkcontainer">
<span class="sliding_down_link" id="triggerdown" >
<a href ="#">
triggerdown (for sliding down)</br>
only one link (for triggering content to slide down) will be displayed
</a>
</span>
</div>
<div id="slidingcontent">
content here
</div>
</body>
Thanks for help :)
This works for me. I corrected the HTML validation errors in your code as well.
jQuery(function ($) {
$(document).ready(function() {
$("#slidingcontent").css({"display": "none", "opacity": "1"});
});
$(window).load(function () {
var speed = 500,
target = $("#slidingcontent");
$(".sliding_up").on("click", function () {
target.slideDown(speed);
});
$(".sliding_down").on("click", function () {
target.slideUp(speed);
});
});
});
#slidingcontent {
position:absolute;
bottom: -2px;
opacity: 0;
padding: 0!important;
}
.linkcontainer {
text-align:center;
}
p.sliding_up, p.sliding_down, #slidingcontent {
color:white;
margin: 1px;
text-decoration:none;
font-weight:bold;
}
p.sliding_up, p.sliding_down {
cursor: pointer;
display:inline-block;
}
p.sliding_up {
background:blue;
}
p.sliding_down {
background:red;
}
#slidingcontent {
background:green;
}
.wrap {
overflow-y: hidden;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="linkcontainer">
<p class="sliding_up">trigger up 1 (for sliding upward)</p>
</div>
<div class="linkcontainer">
<p class="sliding_up">trigger up 2 (for sliding upward)</p>
</div>
<div class="linkcontainer">
<p class="sliding_down">triggerdown (for sliding down)</p>
</div>
<div id="slidingcontent">content here</div>
</div>
I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}
JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.
Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div
The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});
You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});
I am having an issue with my script that I always use to switch tabs. I am using jquery elsewhere on my page so the library is working. Just will not switch?
Here is my demo:
Fiddle
Here is the code, really not sure why it is failing?
<div id="buttons">
<ul>
<li id="intro" class="selected">Link1</li>
<li id="teachers">Link2</li>
<li id="learners" class="last">Link3</li>
</ul>
</div>
<div id="introcontent" >
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" >
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" >
<p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>
#buttons{
float:right;
left:-50%;
position:relative;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
margin-top:96px;
font-size:18px;
}
.light #buttons ul {
margin-top:80px;
}
#buttons li{
float:left;
position:relative;
height:38px;
line-height:38px;
margin-right:47px;
border-top:2px solid #E6E8E8;
cursor:pointer;
}
#buttons li.last{
margin-right:0px;
}
#buttons li.selected{
color:#FF5500;
border-top:2px solid #FF5500;
}
#introcontent, #teacherscontent, #learnerscontent {
padding-top:200px;
margin-bottom:180px;
}
#teacherscontent, #learnerscontent {
display:none;
}
// Change tab class and display content
$('#buttons').on('click', function (event) {
event.preventDefault();
$('#introcontent').removeClass('#teachersoontent');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).fadeIn();
});
$('.tabs-nav a:first').trigger('click'); // Default
So there were quite a few reasons why the code in your fiddle wasn't working.
It was looking for an href to know which div to display, but there weren't any.
I updated your HTML like so, adding a common class to all the divs that would display content, to make it easier to manipulate them as a group:
<div id="introcontent" class="tabContent">
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" class="tabContent">
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" class="tabContent">
<p>sdlkhfskldfjhlksdjflksdj.</p>
</div>
And amended the JavaScript to work with the new class on the content, and not to worry about href properties.
// Change tab class and display content
$('#buttons li').on('click', function (event) { // this lets you click on any li element inside #buttons
$(".selected").removeClass('selected'); // remove the selected class wherever it may be
$(this).addClass('selected'); // add the selected class to the clicked element
$(".tabContent").hide(); // hide all the elements with the class tabContent (added above)
$("#" + $(this).prop("id") + "content").show(); // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});
$('#buttons li:first').click(); // You can trigger a click event like this
Here is the updated fiddle.
http://jsfiddle.net/YH3f4/2/
I am trying to load a div with different content based on the link I click...
While it seems to work for the first link when I click it, clicking the other links only replaces the content with the same content for 'encodeMe' , yet I have specified different content that I want to replace for 'htmlize-me'
The first run-through of this I did not use jQuery's .bind() function. I simply used .click() , and both had the same result. Looking through the jQuery API I thought using the .bind() function would bind each function within it to that particular page element, but it seems to apply it to all my links.
I've achieved the same effect using .hide and .show to toggle divs but I want to be more elegant about how I do that, and this was my attempted alternative...
here's the relevant html:
<label for="list-root">App Hardening</label>
<input type="checkbox" id="list-root" />
<ol>
<li id="encode-me"><a class="show-popup" href="#">encodeMe()</a></li>
<li id="htmlize-me"><a class="show-popup" href="#">htmlizeMe()</a></li>
</ol>
<div class="overlay-bg">
<div class="overlay-content">
<div class="the-content"></div>
<br><button class="close-button">Close</button>
</div>
</div>
here's the script I made to trigger the content change:
$('#encode-me').bind('click' , function() {
$('div.the-content').replaceWith('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').replaceWith('Hi, Im something different');
});
});
Try something like this:
Use html() instead of replaceWith()
$('#encode-me').bind('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').html("Hi, I'm something different");
});
});
replaceWith does exactly what it sounds like, it replaces the div with the h3, so when you click the second link there is no div.
Try setting the innerHTML instead
$('#encode-me').on('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>Found in <p>[web root]/redacted/redacted.asp</p>');
});
$('#htmlize-me').on('click' , function() {
$('div.the-content').html('Hi, I\'m something different');
});
So I figured out a more clever way to do this! Use the DOM to your advantage - set up a nested list structure and change the content using .find() on parent and child elements the list.
Markup
<span style="font-size:1.4em">Type
<ul class="row">
<li>Blah
<div class="overlay-content">
<p></p>
<p class="changeText">Blah</p>
</div>
</li>
<li>Blah2
<div class="overlay-content">
<p></p>
<p class="changeText">Blah2</p>
</div>
</li>
</ul>
</span><br>
<!-- OVERLAYS -->
<div class="overlay"></div>
CSS
.close {
border-radius: 10px;
background-image: url(../img/close-overlay.png);
position: absolute;
right:-10px;
top:-15px;
z-index:1002;
height: 35px;
width: 35px;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:10;
height:100%;
width:100%;
background:#000;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
display:none;
}
.overlay-content {
position:fixed!important;
width: 60%;
height: 80%;
top: 50%;
left: 50%;
background-color: #f5f5f5;
display:none;
z-index:1002;
padding: 10px;
margin: 0 0 0 -20%;
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
Script
$(document).ready(function(){
$('.show-popup').click(function() {
var ce = this;
$('.overlay').show('slow', function() {
$(ce).parent().find('.overlay-content').fadeIn('slow');
});
});
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
$('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
$('.close').click(function() {
$('.overlay-content').hide('slow', function() {
$('.overlay').fadeOut();
});
});
});
I have a one list page with edit column. When he click on edit it will open one edit page with all data which have list of image in thumbnail format.
Now I put close icon to all images.each image have its unique id.
1) When I click on close icon it will hide remove respective image.
2) onclick of submit I want available image ids.
PHP Code:-
<div id="<?=$rw['id'];?>" style="height:68px; width:86px; margin-right:10px; float:left;">
<img src="img/icons/close.png" style="float:right; vertical-align:top; height:18px; width:18px; z-index:9999;" >
<div style="height:50px; width:70px; border:1px solid #999; float:left; margin: 0 10px 0 0; box-shadow: 0 0 1px 1px #888888;">
<a class="group<?=$i;?>" href="<?=$img_gpath;?><?=$rw['upload_url'];?>" title="">
<img src="<?=$img_gpath.$rw['upload_url'];?>" style="height:50px; width:70px; z-index:999;" id="<?=$i;?>">
</a>
</div>
</div>
Please if you have any solution then share it with me.
add common class for div and dynamic id also
now you have only dynamic id;
if you use common class we can write jQuery like this
HTML
<div id="<?=$rw['id'];?>" class="common">
----elements
</div>
jQuery
jQuery('.common').on('click',function(){
var element_id=jQuery(this).attr('id'));// u will get dynamic id of div; after that u can do anything by using this id
});
An example fiddle is created. Please check.
Please give a class of remove-img to the remove buttons.
<img class="remove-img" src="url" />
Then you need to remove the parent division on click of the remove image like:
$('.remove-img').click(function(e) {
$( this ).parent().remove();
});