I need to create a notification counter for my app. For now, I want to add an increasing number on top of an image for each button click. How can this be achieved using jQuery?
JSfiddle
HTML:
<img id="header_bell_notificator" class="show_notif" src="http://www.gsi.co.ir/Docs/Images/Red_Circle.png" alt="" width="30px">
<button id="kick_button">click this</button>
CSS:
.show_notif{
visibility: hidden;
}
JS:
var counter=0;
$( "#kick_button" ).click(function() {$("#header_bell_notificator").removeClass("show_notif");
});
with a few mods to your implementation...
wrapper div for the image
set data-counter attribute on wrapper
show counter using :before pseudo-element
you could get something like this:
jsfiddle
var counter=0,
$bellNotificator = $('#header_bell_notificator'),
$bellNotificatorImg = $bellNotificator.find('img');
$( "#kick_button" ).click(function() {
counter++;
$bellNotificator.attr('data-counter', counter);
$bellNotificatorImg.removeClass("show_notif");
});
body {
font-family: helvetica,arial,sans-serif;
}
#header_bell_notificator {
float:left;
width: 30px;
height: 30px;
margin: 5px;
position: relative;
}
#header_bell_notificator:before {
content: attr(data-counter);
position: absolute;
line-height: 30px;
width: 30px;
text-align: center;
color: #fff;
font-size: .8em;
font-weight: bold;
}
.show_notif{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header_bell_notificator">
<img class="show_notif" src="http://www.gsi.co.ir/Docs/Images/Red_Circle.png" alt="" width="30px" />
</div>
<button id="kick_button">click this</button>
simply try it like this:
UPDATED FIDDLE
$( "#kick_button" ).click(function() {
var counter = parseInt($('.counter').html()) + 1;
$('.counter').html(counter);
});
and add a container called <div class="counter">0</div>
One way would be to move the image to the background of a and then change its inner html.
Like this:
var counter=0;
$( "#kick_button" ).click(function() {
counter++;
$("#header_bell_notificator").removeClass("show_notif").html(counter);
});
Here's the updated fiddle
Related
I want to set up a functionality for a button that causes text to appear underneath it on click.
For example, when you click a button that says "Sign up now", text would appear underneath the button that says "Are you a member, yes or no?".
"Yes" and "No" would be links that bring you to a different page depending on how you answer.
My button code so far (just html and styling done):
<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up
Now</a>
I'm new with this kind of functionality so any help would be greatly appreciated!
Thanks!
Adjust the href attribute as you want.
$('#btn').click(function() {
$('#modal').fadeIn();
});
a {
display: block;
text-decoration: none;
color: white;
background-color: #333;
width: 100px;
padding: 20px;
border-radius: 5px;
margin: 0 auto;
}
#modal {
width: 300px;
height: 120px;
background-color: #ccc;
border-radius: 5px;
margin: 0 auto;
display: none;
}
#modal h3 {
text-align: center;
padding: 10px;
}
#modal a {
width: 50px;
display: inline-block;
text-align: center;
margin: 0 auto;
height: 10px;
vertical-align: middle;
line-height: 10px;
}
.btns {
width: 200px;
margin: auto;
}
a:hover {
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a>
<div id='modal'>
<h3>Are you a member?</h3>
<div class='btns'>
Yes
No
</div>
</div>
You could use the onClick function to unhide text, or elements, below it.
Sign Up Now
<span style="display:none;" id="text">This is some text :D</span>
simple way:
Sign Up Now
<script>
function confirmSignup(){
if(confirm("Are you sure?"))
{
window.location.href="http://somelocation.com/sign-up";
}
}
</script>
Like #Pety Howell said, you can use the onClick function to unhide the text. Here's a pretty straightforward way to do it with jQuery.
$(function() {
$('.link').on('click', function() {
$('.span').addClass('open');
});
});
.span {
display: none;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me
<span class="span">I'm hidden!</span>
Working fiddle: https://jsfiddle.net/3gr03yzn/4/
You could use jQuery toggle() function.
HTML :
<button id="member">
Are you Member ?
</button>
<div class="answer">
Yes<br />
No
</div>
JS :
$("#member").click(function() {
$(".answer").toggle();
});
CSS :
.answer {
display:none;
}
The working example on jsFiddle.
Hope this helps
Try this code.
please vote if this code helpful to you
function execute(){
var x = document.getElementById('link_list');
var y =document.getElementById('btn');
if(x.style.visibility==="hidden"){
y.style.visibility="hidden";
x.style.visibility="visible";
}
}
<button onclick="execute()" id="btn">sign up</button>
<div id="link_list" style="visibility:hidden">
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button> or <button onclick="window.open('google.com')">no</button>
</div>
Most answers mentioned here either uses
jQuery or,
onclick attribute which is obtrusive javascript.
Here's how to achieve the desired behavior using vanilla, unobtrusive JavaScript.
window.onload = function() {
var button = document.querySelector('.ticket-button');
var info = document.querySelector('.info');
info.style.display = 'none';
var dispalyInfo = false;
button.onclick = function(e) {
e.preventDefault(); /* prevent page from navigating to a new page onclick */
if (dispalyInfo) {
info.style.display = 'none';
dispalyInfo = false;
} else {
info.style.display = 'initial';
dispalyInfo = true;
}
}
}
.ticket-button {
display: block;
}
Sign Up Now
<span class="info">Are you a member, yes or no?</span>
References:
Document.querySelector()
HTMLElement.style
My goal is insert <span> into <image>, but I don't know how. Similar effect is on page http://www.bulb.cz/cs/reference, but I don't want it on hover() but on click(). I want insert "data-title" into <span> and after that <span> show on <image>.
HTML:
<div class="Fotogalery">
<img src="images/Thumb/1.jpg" data-title="Zdar" />
<img src="images/Thumb/2.jpg" data-title="Ahoj" />
<img src="images/Thumb/3.jpg" data-title="Cau" />
<img src="images/Thumb/4.jpg" data-title="KUK" />
<img src="images/Thumb/5.jpg" data-title="ohh" />
</div>
CSS:
.Foto{width: 25%;height:auto;float:left;box-sizing: border-box;}
.Gallery{position:relative;}
.Gallery span{position:absolute;z-index:999;}
Javascript:
$(".Fotogalery img").addClass("Foto");
$(".Foto").wrap( "<div class='Gallery'></div>" );
$(".Foto").after("<span></span>");
$(".Foto").click(function() {
var a = $(this).data('title');
});
Try this — http://jsfiddle.net/sergdenisov/p72jnbLt/5/:
Javascript:
$('.Fotogalery img').addClass('Foto');
$('.Foto').wrap('<div class="Gallery"></div>');
$('.Foto').click(function () {
var a = $(this).data('title');
$(this).after('<span>' + a + '</span>');
});
CSS:
.Fotogalery {
font-size: 0;
}
.Foto {
display: inline-block;
width: 100%;
}
.Gallery {
position: relative;
display: inline-block;
width: 25%;
}
.Gallery span {
position: absolute;
z-index: 1;
left: 0;
top: 0;
font-size: 16px;
}
If i understand your question right, u can use next('span') to select span:
$(".Foto").click(function() {
var a = $(this).data('title');
$(this).next('span').html(a);
})
To have span floating over image, make span position:absolute, and container postion:relative
http://jsfiddle.net/gbg1vfLb/2/
I have looked through same questions on this topic but somehow suggested solutions do not work for me :/
Problem is that divs get moved from #box1 to #box2 only once. If detach() used then divs are clickable in #box2 but get rearranged when clicked. If remove()used divs are not clickable in #box2 at all (event listener gone?). I have a feeling that the process of moving the divs is somehow not really complete and I ether have duplicates around in DOM or moved divs disappear entirely and do not react to clicks.
I tried detach(), remove() and appendTo() in various combinations and the best I can get is in the fiddle below
http://jsfiddle.net/uoz3t914/13/
$('#box1 .item' ).on('click', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).remove().appendTo('#box2');
});
$('#box2 .item' ).on('click', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
In your case you have to use the Event Delegation
$('#box1' ).off().on('click','.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box2');
});
$('#box2' ).off().on('click', '.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
You attach the event to the parent, that propagate it to the children, and then any time that you attach the event, put an off() to detach it.
$('#box1' ).off().on('click','.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box2');
});
$('#box2' ).off().on('click', '.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
.item {
width: 50px;
height: 50px;
float: left;
}
#box1 {
border: 1px dotted blue;
position: relative;
width: 200px;
height: 100px;
}
#i1 {
background-color: yellow;
}
#i2 {
background-color: green;
}
#i3 {
background-color: red;
}
#box2{
border: 1px solid black;
width: 250px;
height: 100px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="box1">
<div class ="item" id ="i1"></div>
<div class ="item" id ="i2"></div>
<div class ="item" id ="i3"></div>
</div>
<div id = "box2">
</div>
You can move them between the boxes with:
$('#box1, #box2').on('click', '.item', function () {
$(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#box1');
});
$('#box1, #box2').on('click', '.item', function () {
$(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#box1');
});
.item {
width: 50px;
height: 50px;
float: left;
}
#box1 {
border: 1px dotted blue;
position: relative;
width: 200px;
height: 100px;
}
#i1 {
background-color: yellow;
}
#i2 {
background-color: green;
}
#i3 {
background-color: red;
}
#box2 {
border: 1px solid black;
width: 250px;
height: 100px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box1">
<div class="item" id="i1"></div>
<div class="item" id="i2"></div>
<div class="item" id="i3"></div>
</div>
<div id="box2"></div>
This uses .on()'s event delegation syntax to handle the elements, and a ternary operator to determine which box the element exists in.
Use this html:
<div id="wrapper">
<div id ="box1" class="container">
<div class ="item" id ="i1"></div>
<div class ="item" id ="i2"></div>
<div class ="item" id ="i3"></div>
</div>
<div id = "box2" class="container">
</div>
</div>
and this javascript
$('.item').on('click', function(){
var index = $("#wrapper > .container").index($(this).parent()),
maxIndex = $('#wrapper > .container').length,
nextIndex = (index + 1) < maxIndex ? (index + 1) : 0;
$(this).appendTo($('#wrapper > .container').eq(nextIndex));
});
in your fiddle to move boxes between any number of containers
You may also add Box3, Box4 (with class .container) etc. into the "#wrapper div", you may do it dynamycally
I'm trying to create a simple text slideshow which transits between a phrase to another and loop itself but when I added a break rule to the text, the slideshow doesn't seem to function correctly. It only works when the text is a single line. Your assistance would be greatly appreciated.
Here's the code and jsFiddle: http://jsfiddle.net/rezasan/fnbn8sbc/
//HTML
<div id="index_splashtext">
<h3>An<br/>Intimate<br/>Hideaway</h3>
<h3>A<br/>Paradise<br/>Preserved</h3>
</div>
//CSS
#index_splashtext {
width:311px;
margin:0 auto;
height: 330px;
margin-top: 25px;
text-align:center;
}
#index_splashtext h3 {
position: absolute;
font-size: 4.5em;
line-height: 1.2em;
font-family: "adobe-garamond-pro",sans-serif;
letter-spacing: 0.05em;
font-weight: 400;
margin-bottom: 70px;
color: red;
}
//jQuery
$(function(){
$('#index_splashtext h3:gt(0)').hide();
setInterval(function(){
$('#index_splashtext :first-child').fadeOut(2500)
.next('h3').fadeIn(2500)
.end().appendTo('#index_splashtext');},
8000);
});
You want to use $('#index_splashtext h3:first') instead of $('#index_splashtext :first-child'). In this case, :first-child is also being applied to the <br /> elements, so they get hidden but never faded back in:
$(function () {
$('#index_splashtext h3:gt(0)').hide();
setInterval(function () {
$('#index_splashtext h3:first').fadeOut(2500)
.next('h3').fadeIn(2500)
.end().appendTo('#index_splashtext');
},
8000);
});
jsFiddle example
well this is how i achieved your desired effect, and it is scalable too :)
html:
<div id="index_splashtext">
<h3></h3>
</div>
javascript:
$(function(){
var messages=[];
var counter=0;
var fadeInLength = 2500;
var fadeOutLength = 2500;
var hold = 1000;
messages.push('An<br />Intimate<br />Hideaway');
messages.push('A<br />Paradise<br />Preserved');
$('#index_splashtext h3').hide();
setInterval(function(){
$('#index_splashtext :first-child').
html(messages[counter]).
fadeIn(fadeInLength).
delay(hold).
fadeOut(fadeOutLength);
counter++;
if(counter > messages.length-1){counter=0;}
},fadeInLength+fadeOutLength+hold + 1000);
});
I'm trying to get a simple side navigation bar which you can hide and unhide with a single button.
So far I have it worknig but only every other click, so click to hide works, then does nothing, next click unhides, nothing etc. Yet I have to button set to an image to change on every click, and that is working.
What I have so far is....
HTML:
<div id="navBar-control">
<a href="#" id="toggle-slide-button">
<img src="http://i.imgur.com/8BMxPsC.png" width="50px" height="50px" />
</a>
</div>
<div id="navBar">
<div class="navBtn navBtnText">
Calculator
</div>
<div class="navBtn navBtnText">
About
</div>
<div class="navBtn navBtnText">
Other Services
</div>
</div>
Script:
var state = false;
$("#toggle-slide-button").click(function () {
if (!state) {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/K3MG7gT.png');
state = true;
}
else {
$('#mnavBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/8BMxPsC.png');
state = false;
}
});
and if it matters, CSS:
#navBar{
background-color: #660000;
height: 780x;
width: 80px;
}
.navBtn{
background-color: #660000;
color: white;
width: 80px;
height: 70px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,.2);
opacity: 1;
font-size: 12px;
text-align: center;
}
.navBtnText {
line-height: 120px;
vertical-align: bottom;
}
.navBtn:hover{
background-color:#990000;
}
#navBar-control {
width: 50px;
height: 100%;
padding: 0 15px;
background-color: #000;
}
Fiddle of this: http://jsfiddle.net/GUjPA/91/
I have been basing this off this fiddle: http://jsfiddle.net/GUjPA/13/ This has the desired behavior only that it is on the right of the screen instead of the left. The script I'm using is exactly the same, and besides different colours and size of side bar, its essentially exactly the same.
You have a mistake here:
$('#mnavBar').animate({width: "toggle"}, 1000);
must be
$('#navBar').animate({width: "toggle"}, 1000);
http://jsfiddle.net/GUjPA/94/ here works
var state = false;
$("#toggle-slide-button").click(function () {
if (!state) {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/K3MG7gT.png');
state = true;
}
else {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/8BMxPsC.png');
state = false;
}
});
try this: you had added an m to the second call to #navbar
simplified in fiddle