I am looking to change the content of this span tag:
<span class="ui-btn-text" id="btnText">Read how we have helped</span>
To:
<span class="ui-btn-text" id="btnText">Hide Story</span>
This is what I got so far:
$('#storyBtn').click(function() {
$('#story-body').slideToggle('fast', function() {
$('#btnTextShow').hide();
$('#btnTextHide').show();
});
});
I think you just want to update the text of the span ... if so try this ->
<span class="ui-btn-text" id="btnText">Read how we have helped</span>
$('#storyBtn').click(function() {
$('#story-body').slideToggle('fast', function() {
$('#btnText').text("Hide Story");
$('#btnTextShow').hide();
$('#btnTextHide').show();
});
});
*Untested
Here is a great example on how to achieve this:
First look at the JSFiddle DEMO
Let's see what we have here:
$('.ui-btn-text:eq(1)').hide();
$('#storyBtn').click(function() {
$("#story-body").slideToggle(400);
$(".ui-btn-text").toggle(300);
});
And the html:
<div id="storyBtn">
<span class="ui-btn-text">Read how we have helped</span>
<span class="ui-btn-text">Hide Story</span>
</div>
<div id="story-body">
A long,...<br> long time ago...
</div>
INFO:
As you can see I simplified and removed all the unnecessary ID's and codes JUST TO MAKE VISIBLE HOW SIMPLE CAN ALL BE. You can redo this changes of mine.
Related
am i doing any silly mistake in this ? i tried closest and next but its not supporting in this liberary. and i cant change liberay as well.
i want the function generaic so that i can use this icon multiple times
<span style="position:relative" class="iconblock">
<img class="queicon" src="images/question_icon.gif" alt="icon" />
<span class="helpPopup hidden">test test test</span>
$(".iconblock").mouseover(function()
{
var sachin = $(this).find("hidden");
alert(sachin);
});
$(this).find(".hidden");
You forgot . before hidden.
You can use a short cut too specifying the context $(".hidden",this)
$(".iconblock").mouseover(function()
{
$(".hidden",this).removeClass('hidden');
});
http://jsfiddle.net/cJbVY/
If your intend is to show and hide on mouseover/mouse out you can try this
http://jsfiddle.net/ze6Xy/
$(".iconblock").hover(function()
{
$(".helpPopup",this).toggleClass('hidden');
});
Just trying to help here, Do you really need to use JS/Jquery, for this?
HTML:
<span style="position:relative" class="iconblock">
<img class="queicon" src="images/question_icon.gif" alt="icon" />
<span class="helpPopup hidden">test test test</span>
And in CSS, something like:
.iconblock .hidden {
display:none;
}
.iconblock:hover .hidden {
display:block;
}
Today I tried to make the simpliest close button in javaScript. It unfortunately does not work. This is how it look like:
<div id="popup_bg">
<div id="popup_window">
<span id="popup_close">
</span>
</div>
</div>
and the js code is:
<script type=”text/javascript”>
$("#popup_close").click(function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
</script>
I'd also like to make it apply to any of those "popups", so I'd probably change my it to something like $(this).parent().parent().fadeOut(); - is it possible to do so?
Thanks for help guys! :)
#EDIT
As none of Your solutions work I'll place my code literally :D Maybe You'll find some mistakes that makes it faulty:
<?php if(isset(errors['user'])) : ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message"><?php echo errors['user']; ?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
<?php endif; ?>
I hope that will help You spot any errors. It displays correctly, I click on my "OK" span, nothing happens :p I hate js :D
I saw your code, the jquery part of the code is working..
Check here: Jsfiddle -> http://jsfiddle.net/Zahinize/7YD4D/13/
You should rewrite your conditional If statement like this,
<? ini_set('error_reporting', E_ALL); ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message">
<?php
if(isset(errors['user'])){
echo errors['user'];
}
?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
set error_reporting at that the top..
See more here: http://php.net/manual/en/function.error-reporting.php
Maybe this would help, but frankly i haven't seen error handling like this: error['user'] anywhere.. you should see error handling for writing better code ;)
IDs must unique, you should use classes instead:
<div class="popup_bg">
<div class="popup_window">
<span class="popup_close"></span>
</div>
</div>
Then for selecting the target parent of the clicked element you can use closest method:
$(function() {
$(".popup_close").click(function(event) {
$(this).closest(".popup_bg").fadeOut();
// event.stopPropagation();
});
});
Note that in your code event is undefined you should pass the event object to your handler.
Add document.ready and/or use .on function
<script type=”text/javascript”>
$(function(){
$("#popup_close").on('click', function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
});
</script>
Also, ID's may not repeat in your document, use other selector like class
If there are more than one popup better to use class instead of id.
Example.
$(function()
{
$(".popup_close").on('click',(function()
{
$(this).parents("div.popup_bg").fadeOut();
});
});
And html
<div class = "popup_bg">
<div class = "popup_window">
<span class = "popup_close"></span>
</div>
</div>
You need some content in your span or set height and with. Then you will be able to click on it and it will work.
Avoid tricks with parent().parent() this may break if you change your div structure.
As others have said use the jquery document ready (read a tutorial) and use classes not ids if you intend to reuse the code (read a CSS tutorial)...
I have h3 block's and on click of each of the block I am showing the section associated with it. It is actually something like accordion(hide and collapse). I have also given a drop icon to the h3 tags, means that when the block is opened the h3 should have a dropicon pointing downwards while others h3 should have there dropocons towards right. I am controlling this behaviour using backgroundPosition. I am using the jQuery visible condition to see if the particular block is visible then give its drop icon one background position and to the rest other. It works fine but only for first click. It doesn't work for second click; can somebody explain why? Here is my code:
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
UPDATED CODE:
$("h3").click(function() {
$(".tabs").hide();
$(this).next().show();
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
} else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
})
If you wrap the whole block in a div it might make traversing easier.
Html:
<div class="drop-block">
<h3>Click this</h3>
<ul>
<li>Drop</li>
<li>it</li>
<li>like</li>
<li>it's</li>
<li>hot</li>
</ul>
</div>
Jquery:
var dropper = $('.drop-block');
$(dropper).find('h3').click(function(){
$(this).toggleClass('active');
$(dropper).find('ul').toggle();
});
Example
I Belive that you are looking for live
So it will be something like this:
$(element).live('click', function(){
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
}
Instead of editing the css of them, make a css class "open" (or similar), and then add / remove the class on the click to open / close.
It is much easier to debug by checking for the existence of a class than it is to check the css properties of something in JS.
Better make a class name for each situation and easly handle the action
$('h3').on('click', function(){
if($(this).hasClass('opened')) {
$(this).removeClass('opened');
}
else {
$(this).addClass('opened');
}
}
$(document).on('click', 'h3', function(e) {
$(".tabs").hide('slow');
$(this).css({'backgroundPosition':'0px 14px'});
if(!$(this).next().is(':visible'))
{
$("h3").css({'backgroundPosition':'0px -11px'});
$(this).next().show('slow');
}
});
You can remove 'slow' from show/hide if animation is not required
Here is an example.
It sounds like you need to bind click events to the h3 elements and toggle the visibility of the child elements:
$(function(){
$("h3").click(function(){
$(this).next(".tabs").toggle();
});
});
Example markup:
<h3>Item 1</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
<h3>Item 2</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
Here's a jsFiddle to demonstrate.
I am having problems with simple jQuery snippet. Here is the markup:
<div class="banner">
<div class="bannerInnerRight">
<span class="box5"><h4>Reviews</h4></span>
<span class="box6"><h4>Mission Statement</h4></span>
<span class="box7"><h4>Serving Areas</h4></span>
<span class="box8"></span>
</div><!-- bannerInnerRight -->
</div><!-- banner -->
The h4s are being hidden using css (display:'none'). When each span is hovered over I want its respective h4 to show.
My attempt:
$(document).ready(function() {
$('div.banner > div > span').mouseover(function() {
$(this > h4).show();
});
});
I must be using the this keyword wrong, how do I get this to work?
Try
$(this).find("h4").show();
Try:
$(this).find("h4").show();
$("h4", $this).show();
The second parameter allows you to specify what you want to search in.
How about the following:
$(document).ready(function() {
$('.bannerInnerRight').find('span').mouseover(function() {
$(this).find('h4').show();
});
});
In the HTML below, I would like to copy the "submittedby" beside "message", within the H2 tag:
<div class="comment">
<H2 class="threadtitle">Message 1</h2>
<span class="submittedby">James</a>
</div>
<div class="comment">
<H2 class="threadtitle">Message 2</h2>
<span class="submittedby">Bill</a>
</div>
<div class="comment">
<H2 class="threadtitle">Message 3</h2>
<div class="submittedby">Phil</a>
</div>
My current jQuery code is as follows:
$(document).ready(function() {
$('.submittedby').copy().appendTo('.threadtitle');
});
The problem is this copies EVERY "submittedby" to EVERY "threadtitle". How do I code it so it only copies the "submittedby" from within the same "comment" div?
Thanks!
Use .each() here, like this:
$(function(){
$('.submittedby').each(function() {
$(this).clone().appendTo($(this).siblings('.threadtitle'));
});
});
This loops over each .submittedby element, and moved it around with respect to the current .submittedby you're on in the loop, so each one's handled individually. Also I assumed you meant .clone() here, but if you're actually using the .copy() plugin, just replace .clone() with .copy() in the code above.
$('.submittedby').each(function() {
$(this).prev('.threadtitle').append($(this).html());
});
$('.submittedBy'.each(function() {
var $sb = $(this);
$sb.copy().appendTo($sb.closest('.comment').find('h2.threadtitle'));
});
When you use .each() you get to have code run for each element processed.
edit thanks #Nick
$(document).ready(function(){
$('span.submittedby, div.submittedby').each(function() {
self = $(this);
self.before(self.clone());
});
});
Obligatory example
Try to limit by parent:
$(document).ready(function(){
$('.submittedby:parent').each(function(){
$(this).find('.submittedby').copy().appendTo('.threadtitle');
})
});