When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?
You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.
Related
I have the following code:
<div class="topImg">
<div id="maisinfo"><p id="show">Test</p></div> //show test text
<div class="topImgIcon">
<img src="img/icon.png" class="topImgIcon"><span class="tittle">Icon</span>
</div>
</div>
I want if user click in my <a class="imgClose"> will show my <p> element inside #maisinfo id
My jQuery code:
$(document).ready(function() {
$(".topImg").prepend('<div class="topImg"><a class="imgClose" href="javascript:window.close()"><img src="img/fechar.png"></a></div>');
$("#maisinfo").hide();
//show and dont show the <p> element dont work
$("#show").bind("click",function(){
$("#maisinfo").slideToggle("slow");
return false;
});
});
My div "#maisinfo" will show one form if user click inside my X element (my X element was inside the a href img src inside my jQuery after my test works.
My X element inside jQuery:
You need to use Event Delegation:-
$(document).on("click",'.imgClose',function(){
$("#maisinfo").slideToggle("slow");
});
Example:-
$(document).ready(function() {
$(".topImg").prepend('<div class="topImg"><a class="imgClose" href="javascript:window.close()"><img src="https://i.stack.imgur.com/Ty4bj.jpg" height="20" width="20"></a></div>');
$("#maisinfo").hide();
//show and dont show the <p> element dont work
$(document).on("click",'.imgClose',function(){
$("#maisinfo").slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topImg">
<div id="maisinfo"><p id="show">Test</p></div><br>
<div class="topImgIcon">
<img src="img/icon.png" class="topImgIcon"><span class="tittle">Icon</span>
</div>
</div>
Note:- i have used an icon to show you that it's working.
Let's say I have a template and I want to loop and create div's. I want to listen to clicks on the buttons contained in each of these divs:
<div class="repeatedDiv">
<button class="reply-button">
</div>
$('.reply-button').on('click',function(e)...)
I want to make the reply button function specific to the div that it was selected on. Would it be bad to have something like:
<div class="repeatedDiv">
<button class="reply-button" id="reply-{{this.id}}">
</div>
Don't make it more complicated than it really is
$(document).on('click', '.reply-button', function(e){
var divClicked = $(e.target).closest('.repeatedDiv');
// do something with clicked div
// var divClicked is the div elmt that contains the button that was clicked
// doing it this way you might not even need an id at all
console.log(divClicked.attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="repeatedDiv">
<button class="reply-button">div1</button>
</div>
<div id="div2" class="repeatedDiv">
<button class="reply-button">div2</button>
</div>
<div id="div3" class="repeatedDiv">
<button class="reply-button">div3</button>
</div>
And if you do need an id when creating a new div create it dynamically with e.g.
var newID = "id-" + Date.now();
console.log(newID);
I am new to web development. And I am stuck with one issue. I have implemented a flip functionality. Where if I click on the div, the element flips. Below is what I have tried.
<div class = "flip" id = "flip">
<div class = "front">
<div id = "chartAnchor1" class="x_content">
</div>
</div>
<div class = "back">
<div id = "abcanchor1" class="x_content">
</div>
</div>
</div>
Here abcanchor1 and chartanchor are the anchor where the actual template is embedded. I am using https://nnattawat.github.io/flip/ plug in to implement flip.
At present I am able to flip when the div is clicked. But I want that to happen on button click.
Code to flip :
$("#flip").flip();
But all it does is, it flips the element when clicked upon. So, default trigger is 'click' event.
I want the same functionality to work by cliking on a button rather than clicking on the div itself.
<button type="button" id = "toggle" class = "toggle">Click Me!</button>
Everything (flip) is working fine. All I want is to trigger the flip on a button click. It's given in this link: https://nnattawat.github.io/flip/ on how to implement the flip (toggle) on button click but I am not able to implement that. Can someone guide me.
EDIT
<script>
$(function()
{
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
});
</script>
Error: When the button is clicked I get this error
firstDashboard.html:34 Uncaught TypeError: $(...).flip is not a function
EDIT 2:
Code Base:
<button type="button" id = "toggle" class = "toggle">Click Me!</button>
<div class = "flip" id = "flip">
<div class = "front">
<div id = "chartAnchor1" class="x_content">
</div>
</div>
<div class = "back">
<div id = "abcanchor1" class="x_content">
</div>
</div>
</div>
<script src="../Scripts/jquery.flip.js"></script>
<script>
$(function()
{
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
}); });
</script>
Error: Uncaught TypeError: $(...).flip is not a function
:
Please check this demo: https://jsfiddle.net/hv83LLbw/
You need to set trigger to manual:
$("#flip").flip({
trigger: 'manual'
});
and then attached the click event handling:
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
The over all
$(document).ready(function() {
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
});
You can do this by hooking a click event to that button and calling flip() within the event handler, like this:
<div class="flip" id="flip">
<div class="front">
<div id="chartAnchor1" class="x_content"></div>
</div>
<div class = "back">
<div id="abcanchor1" class="x_content"></div>
</div>
</div>
<button type="button" id="toggle" class="toggle">Click Me!</button>
$('#toggle').click(function() {
$('#flip').flip();
});
I have made a simple system which detects double taps. I want to show a heart icon when someone double taps on an image, just like on Instagram.
This is what my code looks right now:
var elements = document.getElementsByClassName('snap_img');
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
// Some javascript to show the heart icon
});
});
This is what the HTML looks like:
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
<div class="snap_too">
</div>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
LA is the shit...
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
So when the element 'snap_img' is double tapped, I need to get the element 'like_heart' which is one line below the snap_img element. How do I get that sibling element and fade it in with JQuery?
Like this
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
$(element).next().text('♥').hide().fadeIn();
});
});
P.S. I've added that heart text, since the sibling was empty.
On the event handler, i would do $(element).parent().find('.like_heart').fadeIn(); So the code is not dependant on the element ordering.
(To clarify to selector: take the parent element which is the div.snap_item and find an element with class like-heart inside it)
I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');