I try to animate a div with a easeOutBounce effect when the page load, but is not working for me.
I have referenced the jQuery UI.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
My jQuery code:
$(document).ready(function() {
$(".content").animate({marginTop: "-=50px"},1000,'easeOutBounce');
});
My html code:
<div class="content">
<h3>Titulo h3</h3>
<p>Este texto lleva una animacion lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla urna, consequat nec erat bibendum, ullamcorper fermentum ligula.</p>
<img width="50%" src="Images/javascript-movimiento.png" alt="animationJS" />
</div>
This works in Chrome - I see the title and the para, then very quickly the para slides up to the top with a pleasing bounce. Please confirm it works for you too and if so check you HTML for typos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body >
<div class="content">
<h3>Titulo h3</h3>
<p>Este texto lleva una animacion lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla urna, consequat nec erat bibendum, ullamcorper fermentum ligula.</p>
<img width="50%" src="Images/javascript-movimiento.png" alt="animationJS" />
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(".content").animate({marginTop: "-=50px"},1000,'easeOutBounce');
});
</script>
</html>
Related
I want to swap 2 divs using jquery but when I tried to swap it using insertAfter() in gets inserted twice. Just want to specify that each parent element needs to only swap the divs once.
So in each parent element wcmsd-step-container I need to insert the wcmsd-checkbox-item-description class below the wcmsd-step-title class. But it gets duplicated twice when swapping it.
Can anyone point what's the right function to use on my jQuery code?
jQuery(document).ready(function() {
jQuery('.wcmsd-step-container').each(function() {
jQuery('.wcmsd-checkbox-item-description').insertAfter(jQuery('.wcmsd-step-title'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Step 1-->
<div class="wcmsd-step-container">
<h2 class="wcmsd-step-title">What type of photo do you want?</h2>
<div class="wcmsd-step-content">
<label class="wcmsd-checkbox-item-title">choose your photo</label>
<p class="wcmsd-checkbox-item-description">Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
</div>
</div>
<!--Step 2-->
<div class="wcmsd-step-container">
<h2 class="wcmsd-step-title">What type of video do you want?</h2>
<div class="wcmsd-step-content">
<label class="wcmsd-checkbox-item-title">choose your video</label>
<p class="wcmsd-checkbox-item-description">Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
</div>
</div>
Your code inside the loop has no relation to the loop, so it's just for (i=0;i<2;++i) with the inner code saying "take all descriptions and put them all after every title" - you get two because there's two, if you had 3, you'd get 3 after each title.
You need to use this inside the loop to ensure the correct elements are moving to the correct place.
$('.wcmsd-step-container').each(function() {
$(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title'));
});
Updated snippet with a button to see before/after
$("#btn").click(() => {
$('.wcmsd-step-container').each(function() {
$(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title'));
});
});
.wcmsd-step-content { background-color: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">click me</button>
<!--Step 1-->
<div class="wcmsd-step-container">
<h2 class="wcmsd-step-title">What type of photo do you want?</h2>
<div class="wcmsd-step-content">
<label class="wcmsd-checkbox-item-title">choose your photo</label>
<p class="wcmsd-checkbox-item-description">Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
</div>
</div>
<!--Step 2-->
<div class="wcmsd-step-container">
<h2 class="wcmsd-step-title">What type of video do you want?</h2>
<div class="wcmsd-step-content">
<label class="wcmsd-checkbox-item-title">choose your video</label>
<p class="wcmsd-checkbox-item-description">Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
</div>
</div>
I'm working on tabs I want multiple tabs on the same page and I don't want to change id's for the next tab because I have to pass dynamically. I tried using id same id's which are the conflict with each other. Can anyone suggest me. So, far I tried.
function atscTabs() {
$('.at-tabs-nav__item').click(function() {
var tab = $(this).data('tab');
$('.at-tab-__title_text').removeClass('current');
$('.at-tabs-nav__item').removeClass('current');
$(this).addClass('current');
$("#" + tab).addClass('current');
})
}
atscTabs();
.current {
color: white;
padding: 5px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current" data-tab="tab-1">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text" data-tab="tab-2">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text" data-tab="tab-3">Tab #3</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item" id="tab-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item" id="tab-2">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item" id="tab-3">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
Hi i have created small script to solve your problem. I hope this will help.
function atscTabs() {
$('.at-tabs').each(function(index, item){
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content =$(this).find('.at-tabs-content__item');
$content.hide();
$label.each(function(idx, ele){ $(this).attr('data-target', idx)});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
$menuContainer.click(function(ele){
$($mainContainer).find('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$($mainContainer)
.find('.at-tabs-content .at-tabs-content__item')
.hide()
.eq(parseInt($(this).find('[data-target]')
.attr('data-target'))).show();
});
});
}
atscTabs();
Let me know if still need help. Avoid using one id multiple places.
FYI: https://stackoverflow.com/a/14446052/5011051
What i would like, i click on a link, and a div before this shows or hides, ive tried .prev() and .before() but i do not think i am using them correctly. The code is only part of it, the same code is repeated using owl carousel.
What is happening is all the classes are showing it, not just the 1 item.
So when i click on the showMore button, i want only the previous class: moreInfo to show / hide.
$('.showMore').click(function() {
var information = $('.moreInfo');
if (information.is(":hidden")) {
information.slideDown("slow");
} else {
information.slideUp("slow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<span>
<img src="owl1.jpg">
<p class="title">Owl</p>
<div class="moreInfo">
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat urna arcu, vel molestie nunc commodo non. Nullam vestibulum odio vitae fermentum rutrum.</p>
</div>
<div class="youtube">
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="buttons">
<i class="fa fa-arrow-down"></i>
</div>
</span>
</div>
Thanks
You need to go up one to the button DIV and then go to the previous DIV to reach the corresponding moreInfo DIV.
var information = $(this).closest(".buttons").prev(".moreInfo");
Here's the whole updated code:
$('.showMore').click(function() {
var information = $(this).closest(".buttons").prev(".moreInfo");
if (information.is(":hidden")) {
information.slideDown("slow");
$(this).find("i").text("Show less");
} else {
information.slideUp("slow");
$(this).find("i").text("Show more");
}
});
.moreInfo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<span>
<p class="title">Owl</p>
<div class="moreInfo">
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat urna arcu, vel molestie nunc commodo non. Nullam vestibulum odio vitae fermentum rutrum.</p>
</div>
<div class="youtube">
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="buttons">
<i class="fa fa-arrow-down">Show more</i>
</div>
</span>
</div>
I wrote js code in MyScript.js and how I can make my script run when page load?
and how I can make script file run in my mvc?
I hope I can get a precise answer and understand that good.
When I did on regular html and not in mvc it works very well
the two js file i would like to use are
1. jquery.zaccordion.js
2. MyScript.js
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery-1.8.2.js")
#Scripts.Render("~/bundles/jquery.zaccordion.js")
#Scripts.Render("~/bundles/MyScript.js")
#RenderSection("scripts", required: false)
#RenderSection("MyScript", required: false)
</head>
<body>
<header>
<div class="site-logo">
<img class="img-logo-size" src="Images/logo.png" alt="" />
</div>
<div class="manu">
<div class="nav-tabs">
<div class="hoverBtn">#Html.ActionLink("Home", "Index", "Home")</div>
<div class="hoverBtn">#Html.ActionLink("About", "About", "Home")</div>
<div class="hoverBtn">#Html.ActionLink("Contact","Contact","Home")</div>
</div>
</div>
<div class="slider-border">
<ul id="splash">
<li>
<img class="img-size" src="../Images/TM-front-image-World-network.jpg" alt="" />
<div>
<strong>Old School Diner</strong>
<p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.</p>
</div>
</li>
<li>
<img class="img-size" src="../Images/banner-your-it-11.jpg" alt="" />
<div>
<strong>A Day at the Pool</strong>
<p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.</p>
</div>
</li>
<li>
<img class="img-size" src="../Images/network1.png" alt="" />
<div>
<strong>Fill it Up!</strong>
<p class="splash-text">Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.</p>
</div>
</li>
<li>
<img class="img-size" src="../Images/1338453958network_header.jpg" alt="" />
<div>
<strong>Going for a Drive</strong>
<p class="splash-text">Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.</p>
</div>
</li>
</ul>
</div>
</header>
<div class="page-wrap">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
#RenderSection("MyScript", required: false)
</div>
<footer>
<div class="site-footer">
<div class="float-left">
<p>©#DateTime.Now.Year-Erez Gershon</p>
</div>
</div>
</footer>
Thanks for all
For this line to work #Scripts.Render("~/bundles/MyScript.js") you have to register MyScript.js to bundle in BundleConfig.cs file.
bundles.Add(new ScriptBundle("~/bundles/MyScript.js").Include(
"~/Scripts/MyScript.js")); // make sure that this is your path to MyScript.js
If you want to use #RenderSection("MyScript", required: false), it's a section that will be rendered in a view, like below. But if you want to add MyScript.js you have to include that line of code inside the section.
#section MyScript {
#Scripts.Render("~/bundles/MyScript.js")
}
Note: Every new script you add in your project that you want to use it with #Scripts.Render you have to include in BundleConfig.
I am making a test website for a future project and I am having jQuery issues. It is a static HTML5 website with a social widget, when I remove one of the jQuery lines, the site loses its styling and the widget looks pretty. When I add that jQuery I removed, the site will look good, but the widget will look really bad. How can I fix this conflict issue? I will add the code to the main website on here:
<!DOCTYPE HTML>
<html><head>
<title>test site</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!-- Social Widget Goodies Start -->
<link rel="stylesheet" type="text/css" href="css/dcsmt.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="inc/js/jquery.plugins.js"></script>
<script type="text/javascript" src="inc/js/jquery.site.js"></script>
<script type="text/javascript" src="js/jquery.social.media.tabs.1.7.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#social-tabs').dcSocialTabs({
widgets: 'twitter,facebook',
twitterId: '20782546',
facebookId: '69431101263',
fblikeId: '69431101263',
fbrecId: 'https://www.facebook.com/ArkansasState',
tweetId: '20782546',
autoClose: true,
facebook: {
text: 'content'
}
});
});
</script>
<!-- Social Widget Goodies End... -->
</head>
<body class="homepage">
<!-- Header -->
<div id="header-wrapper">
<div id="header" class="container">
<!-- Logo -->
<h1 id="logo"><img style="margin-top:10px;" src="images/logo_tiny.png" width="147" height="50" alt="logo"></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>
Main Menu
<ul>
<li>Lorem ipsum dolor</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
<li>
Phasellus consequat
<ul>
<li>Lorem ipsum dolor</li>
<li>Phasellus consequat</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
</ul>
</li>
<li>Veroeros feugiat</li>
</ul>
</li>
<li>Link#01</li>
<li class="break">Link#02</li>
<li>Link#03</li>
</ul>
</nav>
</div>
<!-- Hero -->
<section id="hero" class="container">
<header>
<h2>ASTATE EMERGENCY PORTAL
<br/>
our main website is currently down</h2>
</header>
<p>Please scroll down and use the links provided in this portal
to access external applications like<br> e-mail, blackboard, etc. etc.</p>
<ul class="actions">
<li>www.astate.edu</li>
</ul>
</section>
</div>
<!-- Features 1 -->
<div class="wrapper">
<div class="container">
<div class="row">
<section class="6u feature">
<div class="image-wrapper first">
<img src="images/pic01.jpg" alt="" />
</div>
<header>
<h2>For Students<br />
Access your E-mail Account Here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li>Enter</li>
</ul>
</section>
<section class="6u feature">
<div class="image-wrapper">
<img src="images/pic02.jpg" alt="" />
</div>
<header>
<h2>For Faculty & Staff<br />
Access your E-mail Account here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li>Enter</li>
</ul>
</section>
</div>
</div>
</div>
<!-- Promo -->
<div id="promo-wrapper">
<section id="promo">
<h2>Live social updates</h2>
Do not press
</section>
</div>
<!-- Features 2 -->
<div class="wrapper">
<section class="container">
<header class="major">
<h2>Sed magna consequat lorem curabitur tempus</h2>
<p>Elit aliquam vulputate egestas euismod nunc semper vehicula lorem blandit</p>
</header>
<div class="row features">
<section class="4u feature">
<div class="image-wrapper first">
<img src="images/pic03.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<img src="images/pic04.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<img src="images/pic05.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
</div>
<ul class="actions major">
<li>Elevate my awareness</li>
</ul>
</section>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<div id="footer" class="container">
<header class="major">
<h2>Keep in touch with us</h2>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel sem sit<br />
dolor neque semper magna lorem ipsum feugiat veroeros lorem ipsum dolore.</p>
</header>
<div class="row">
<section class="6u">
<form method="post" action="#">
<div class="row collapse-at-2 half">
<div class="6u">
<input name="name" placeholder="Name" type="text" />
</div>
<div class="6u">
<input name="email" placeholder="Email" type="text" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row half">
<div class="12u">
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
<li><input type="reset" value="Clear form" /></li>
</ul>
</div>
</div>
</form>
</section>
<section class="6u">
<div class="row collapse-at-2 flush">
<ul class="divided icons 6u">
<li class="icon fa-twitter"><span class="extra">twitter.com/</span>untitled</li>
<li class="icon fa-facebook"><span class="extra">facebook.com/</span>untitled</li>
<li class="icon fa-dribbble"><span class="extra">dribbble.com/</span>untitled</li>
</ul>
<ul class="divided icons 6u">
<li class="icon fa-instagram"><span class="extra">instagram.com/</span>untitled</li>
<li class="icon fa-youtube"><span class="extra">youtube.com/</span>untitled</li>
<li class="icon fa-pinterest"><span class="extra">pinterest.com/</span>untitled</li>
</ul>
</div>
</section>
</div>
</div>
<div id="copyright" class="container">
<ul class="menu">
<li>©2014 - ASTATE Emergency Portal. All rights reserved.</li>
</ul>
</div>
</div>
</body>
<div id="social-tabs"></div>
</html>
This is caused by the ordering of your scripts. Rather than just removing js/jquery.min.js, you should move your other jQuery script to this position:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
...
...otherwise the JavaScript files located above this jQuery include's current position may not wait for jQuery to load before attempting to execute then not-yet-present jQuery calls.