I am attempting to display a lightbox when a button in my HTML is pressed.
Here is my HTML:
<div class="login-signup">
<h1> Need to sign in or register? </h1>
<div class="buttons">
SIGN IN
REGISTER
<div class="clear">
</div>
</div>
</div>
When Sign In is pressed, I want my lightbox to present. I've tried to do this but it doesn't seem to work:
$('.login-signup .buttons').click(function(e) {
$('.sign-in').lightbox_me({
});
});
Any ideas?
Could it be that you don't have any elements in your DOM with class attribute "sign-in" ?
What's the result of this ?
$('.load').click(function(e) {
alert($(".sign-in").length);
});
If it's 0 then that means that you don't have any elements in your DOM with class="sign-in" and your lightbox thing probably can't do anything on an element that doesn't exist.
If you want a specific button to fire, in this case it is your SIGN IN button, then use the assigned class like so:
$('.load').click(function(e) {
$('.sign-in').lightbox_me({
});
});
More information
Related
I have created a button on a landing page, I would like users to be redirected to another section (in my case the contact section) on the same page when they click this button. I have tried doing this but it's not working
document.querySelector('#btn').
addEventListener('click',()=>{
document.querySelector('#contact').
style.scrollBehavior = 'smooth'
})
<button id="btn">Discover Now</button>
<section id = "contact" class="contact"></section>
I have also tried this
<button>Discover Now</button>
but did not work, where am I doing it wrong?
In CSS, set scroll-behavior property like this:
html {
scroll-behavior: smooth;
}
In HTML, add an a tag with a href attribute refering to certain section:
Click
<div id="contact"></div>
Just
Discover Now
You can't put a link inside a button. Use CSS to make the link look like a button.
You having a ; inside a javascript object { behavior:'smooth' ; } which make an error syntax, you also could press f12 to check the console logs, im sure it yelling at you the same when you click the button, something like unexpected token ;:
<button id="btn">Discover Now</button>
<section id = "contact" class="contact">
<script>
document.querySelector('#btn').
addEventListener('click',()=>{
document.querySelector('#contact').
scrollIntoView({
behavior:'smooth'
});
</script>
You are missing a closing section tag.
<section id = "contact" class="contact">
lorem ipsum
</section>
You may want to check on this page for explanations:
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1
Why use javascript? You can do this with just html. All you need is:
Discover now
<div id="contact">Contact section</div>
Neither of your examples are valid html btw.
using scrollit it is easy to customize http://www.bytemuse.com/scrollIt.js/
Discover now
That's what i recommend using.
You can use javascript with this
<button id="contact">Discover now</button>
document.getElementById("contact").addEventListener("click", function(){
location.hash = "contact";
});
for last few days I'm working on a project, now in this project, I have a sidebar with buttons like this
<div class="btn">
Button 1
</div>
<div class="btn">
Button 2
</div>
<div class="btn">
Button 3
</div>
Also, I have some javascript for mouseenter event code like this
$(function).ready(function(){
$('.btn').mouseenter(function(){
$('.btn').css('color', 'red');
});
});
Now the problem is this javascript code is changing all the elements with the same class. I don't want it. I want to change only one button.
For example, if hover on the first button, the javascript code should change the color of the first button only, not other buttons
For some reason, i can not use CSS for this case
So can anyone help me to solve this problem
You need to reference the element specifically with $(this) otherwise all elements with class ".btn" will change:
$('.btn').mouseenter(function () {
$(this).css('color', 'red');
});
If you need to specify which element with the same class name, you can use .eq(). $("div.btn") would mean all <div> elements with the class btn. However, if you do $("div.btn").eq(0), it would mean the first <div> element with the class btn. Similarly, .eq(1) for the second element and so on.
It should be like this.
$(function).ready(function(){ $('.btn').mouseenter(function(){ $(this).css('color', 'red'); }); });
$(document).ready(function(){
$(".btn").mouseover(function(){
$(this).css('color','red')
});
$(".btn").mouseleave(function(){
$(this).css('color','#000000')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
Button 1
</div>
<div class="btn">
Button 2
</div>
<div class="btn">
Button 3
</div>
How would I create a welcome screen on my web site? For Example: I have an image and a link that says "ENTER" when the user clicks enter the web site appears. How would I do that? Also if possible with JavaScript or JQuery, When the user clicks "ENTER", would it be possible to crossfade from the splash screen to the web site? I want that the link be functional within any element/tag on the DIV splash.
I have this code:
$('.Intro').click(function()
{
$(this).parent('#Intro').fadeOut(1000);
});
But it only works with:
<DIV id="Intro">
ENTER
</DIV>
And not with:
<DIV id="Intro">
<DIV class="EnterII">
ENTER
</DIV>
</DIV>
Therefore, just within the DIV Intro...
Why do you need to complicate?
As identifiers must be unique. Simply use ID selector
$('#Intro').fadeOut(1000)
<DIV id="Intro">
<DIV class="EnterII">
ENTER
</DIV>
</DIV>
With a little bit of indentation you can see that in this case the parent() function will return EnterII so that is the div that will be faded out. Use jquery closest() in order to get intro
$('.Intro').click(function(){
$(this).closest('#Intro').fadeOut(1000);
});
Have you tried just:
$('#Intro').fadeOut(1000);
instead of
$(this).parent('#Intro').fadeOut(1000);
I am dynamically assigning the div id based on the api call back data. For example I have a bunch of data returned which is appended to a div and I can assign the div id with a unique ip address. I have full control over what I can assign i.e. DIV id or class or whatever..
I have attached an example of what the output looks like and hopefully it will clarify what i am looking for.
What I want to be able to achieve is when an endpoint link is clicked, it will show the respective div and hide all other DIV data boxes.. The endpoint links can made clickable and i can add onclick scripts to them or whatever needs to be done
Whether we use the div id or class name i am not fussed.
This should work just fine.
Assign your div with a class, in the demo i'm using EndPoint. The onclick function will use the class to find the div element and hide it. Then it will use this the element used to trigger the function, target the div within that element and show it.
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
End Point [0]
<div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
End Point [1]
<div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
End Point [2]
<div><b>IP Address:</b> 206.204.52.31</div>
</div>
If you don't understand anything please leave a comment below and I will get back to you as soon as possible.
Edit - jQuery Append with onclick
var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint">End Point ['+i+']<div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
I hope this helps. Happy coding!
Since elements are dynamically generated it's better to do with classes IMO.
HTML
<div id="endpoint1">
<a href='#' class='clicker'>End Point 1</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint2">
<a href='#' class='clicker'>End Point 2</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint3">
<a href='#' class='clicker'>End Point 3</a>
<p class='hideThis'>1.1.1.1</p>
</div>
JavaScript (using JQuery)
$('.clicker').on('click', function () {
$('.hideThis').hide();
$(this).next().show();
});
http://jsfiddle.net/ksvexr40/1
If you want to hide the content initially, just add the following CSS class which hides the content initially.
.hideThis{
display: none;
}
I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.
While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace show() with toggle(), it does not work and does not return any error.
I was wondering if someone can help me identify the cause of this problem.
My Markup
<div class="option">
<div class="prod-text">Toy Whistle </div>
<div>
<img class="info-icon" src="Info-icon.png">
</div>
<div class="option-info" style="display:none;">
<div>
<div class="price-text">Price: $100</div>
<div class="prod-id-text">Item Number: 231912</div>
<div class="quantity-text">Quantity: 72</div>
</div>
</div>
</div>
JQuery (does not work)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').toggle();
});
JQuery (works!)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').show();
});
Many thanks in advance!
Perhaps the click event handler is getting bound twice, and thus fire twice for each click. The show() would work fine in this case, but the toggle() would show and then immediately hide the element each time you click. Try this:
$(".info-icon").click(function(){
console.log('click handler fired');
$(this).parent().parent().find('.option-info').toggle();
});
And run this with Web Inspector or Firebug enabled to see how many messages are logged for each click.