jquery .toggle() doesn't work - javascript

I tried to learn JavaScript and Jquery. I want to make a button that hide my text. I used the toggle function for that but it doesn't work and I don't know why. Can someone help me?
Here is the script:
$(document).ready(function() {
(".button").click(function() {
$(".einleitung").toggle(1000);
});
});
And here is the text that I want hide:
<button class="button">Lesen</button>
<div class="einleitung">
<article class="article">
<p><strong><em>My text.</em></strong></p>
</article>
</div>
Here is the link for Jquery:
<header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</header>
Thanks for helping me:)

It working fine, You have missed $ before (".button"):
$(document).ready(function() {
$(".button").click(function() {
$(".einleitung").toggle(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Lesen</button>
<div class="einleitung">
<article class="article">
<p><strong><em>My text.</em></strong></p>
</article>
</div>

You missed $ in (".button").
Correct way $(".button")

Use $(".button").click(function(){ });.$ is used in jquery to select a tag and to apply action on it.

$ is missing in code
Correct code :
$(document).ready(function() {
$(".button").click(function() {
$(".einleitung").toggle(1000);
});
});
Hope this will help you!

Related

Javascript actions not working in mageneto

I'm working on this theme and I wanted to create this simple nav that would fadeIn on click and fadeOut on click.
<div id="mobile-nav">
<a class="exit"></a>
<div class="logo"></div>
<div class="center">
<li class="skincare">Skincare</li>
<li class="makeup">Makeup</li>
<li class="kits">Kits</li>
<li class="help">Help</li>
</div>
</div>
<script>
$(function() {
$('.exit').click(function(){
$('#mobile-nav').fadeOut();
});
}
</script>
However it doesn't seem to work when I try it out. Other types of script like swiper.js works, but this simple script doesn't work. Is there anything wrong with what I'm doing? I've been checking for errors and jQuery is loading as well.
Live preview here - http://magazine.eldecosmetics.com/
It should be
$(function() {
$$('.exit').invoke('observe', 'click', function() {
$('#mobile-nav').toggleClass('fadedOut');
});
});
Your code is
$(function() {
$$('.exit').invoke('observe', 'click', function() {
$('#mobile-nav').toggleClassName('fadedOut');
});
}
In Magento try to avoid jquery conflicts you must use jQuery instead of $ symbol.
For example i have mentioned the correct coding
jQuery(function(){
$$('.exit').invoke('observe', 'click', function() {
jQuery('#mobile-nav').toggleClass('fadedOut');
});
});
Hope it will helps to you guys.

js slideUp doesn't work

I want to add slideUp effect to my page. My <body> code is:
<script>
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
</script>
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>
When i click a button nothing happens. Please help.
Wrap it in $(document).ready. Your click handler is being assigned before the #slide_up element is ready for use:
$(document).ready(function(){
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
});
JSFIDDLE http://jsfiddle.net/3uhCa/2/
Nothing wrong with your code. are you loading jquery correctly?
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>

Javascript "close button" not working

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)...

fade out <a href> element

I'm trying to face a particular class .mosaic-block to fade on clicking this:
<a href="#">
<div id="t0" class="n0 lfloat"><img src="images/home.png"><br>Home</div>
</a>
My Jquery code is:
<script type="text/javascript">
$(function () {
$('a #t0').click(function() {
$(".mosaic-block").animate({
opacity: 0.0
}, 1500 );
});
});
</script>
But I'm not getting the desired results.
EDIT#1
My .mosain-block HTML code:
<div class="mosaic-block bar">
<h4>Sloppy Art</h4>
<p>abcd</p>
</div>
Your code is fine.
You can see it in action here.
So the error is elsewhere. For example in the jQuery import (yes, I got a hint on this one ;) ) which could look like this :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Why not use the inbuilt fadeOut() method
$(".mosaic-block").fadeOut(1500);

Why FadeOut is not working?

Take a look at this code:
<script>
$(function(){
$("div.note a").live("click", function(e) {
e.preventDefault();
answer = confirm("Delete?");
if (!answer) return false;
$(this).parent().fadeOut('slow', function(){
$(this).remove();
});
});
});
</script>
<div id="note_list">
<div class="note">
Text:
X
</div>
<div class="note">
Text:
X
</div>
<div class="note">
Text:
X
</div>
<div class="note">
Text:
X
</div>
</div>
Could somone tell me why the fadeout is not working? after the click the div is deleted but i don't see the fedeout effects. Why?
It is working, I made a fiddle for you.
If for some reason you still can't see it, try to replace 'slow' by a number of milliseconds, something big enough like 3000 should do it.
you could also try .fadeTo(3000,0,function(){$(this).remove();})

Categories

Resources