Develop Reference

jQuery: .after() is causing multiplication element duplication glitch?

Basically, I am getting an href value, then taking that value, creating a new element after the one im getting it from, then applying the href to the new one. The problem is, after every time I copy and paste this code, one for facebook, and one for twitter, as a share button, it multiplies from 2 to 3, showing 1 twitter button, and two facebook buttons. This has completely stumped me, never ran into this issue before.
$(document).ready(function () {
$('.mm').each(function () {
$('a', this).after('<br><a class="tw">twitter</a><br>');
var lnk = $(this).find('a').attr('href');
$('.tw', this).attr('href', lnk);
});
});
$(document).ready(function () {
$('.mm').each(function () {
$('a', this).after('<br><a class="fb">facebook</a><br>');
var lnk = $(this).find('a').attr('href');
$('.fb', this).attr('href', lnk);
});
});
Codepen: https://codepen.io/zachreynolds/pen/oEBMzz

It's because you are applying .each() 2 times.
You need to Merge your code into one .each() like below:-
$(document).ready(function () {
$('.mm').each(function () {
var lnk = $(this).find('a').attr('href');
$(this).find('a').after('<br><a class="tw" href="'+lnk+'">twitter</a><br><br><a class="fb" href="'+lnk+'">Facebook</a><br>');
});
});
Working example:-
$(document).ready(function () {
$('.mm').each(function () {
var lnk = $(this).find('a').attr('href');
$(this).find('a').after('<br><a class="tw" href="'+lnk+'">twitter</a><br><br><a class="fb" href="'+lnk+'">Facebook</a><br>');
});
});
html {
background-color: #eee;
}
.mm{background:#ccc;margin:5px}
body {
margin: 0 auto;
color: #323232;
max-width: 100%;
line-height: 1.5;
padding: 1em 3em;
background-color: #fff;
font-family: 'Roboto', serif;
}
h1 {line-height: 2;}
p{ font-size: 1.2em;}
pre {
padding: .5em;
color:#bada55; /* bright green */
display: block;
border-radius: 0.3em;
font-size:1em;
background-color: #000;}
}
code {
background-color: #eee;
font-size:.25em;
font-family:verdana;
}
a:link {color:#DB2929;text-decoration:underline;}
a:visited{color:green;text-decoration:none;}
a:hover{color:green;}
a:active{color:red;}
.tw,.fb{width:100px;height:33px;padding:7px;}
.tw {background:#09f}
.fb {background:#46a}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cc-m-8497708420" class="j-module n j-rss ">
<div class="rssFeed">
<h3>sustainability</h3>
<div class="mm">
<span class="rssFeedTitle j-rss-feed-title">Trees that helped save America's farms during the Dust Bowl are now under threat</span><br><br>
>> Read More<br><br>
</div>
<div class="wrappedtext">(Tue, 06 Feb 2018)</div>
<div class="mm">
<span class="rssFeedTitle j-rss-feed-title">Can Money Grow on Trees? Across the world, businesses are making money by restoring forests and farmland.</span><br><br>
>> Read More<br><br>
</div>
<div class="wrappedtext">(Wed, 07 Feb 2018) </div>
</div>
</div>

Stop tabbed element closing on second click

I have snippet of code that opens tabs, however I would like 1 tab to always remain open.
How can I disable the second click on the tab button already open stopping the tab from closing?
So referring to the fiddle, if you click 'Button 1' once, it will show the corresponding tab, but if you click 'Button 1' again it shouldn't close the corresponding tab. Only clicking 'Button 2' will close it also opening it's own tab.
Fiddle
JS
$(document).ready(function() {
$(".tone").click(function(e) {
e.preventDefault();
var tab = $(this).attr("id");
$(".tone__pack").not(tab).css("display", "none");
$(tab).toggle();
});
});
HTML
<div class="tone" id="#tone1">
Button 1
</div>
<div class="tone__pack" id="tone1">
</div>
<div class="tone" id="#tone2">
Button 2
</div>
<div class="tone__pack" id="tone2">
</div>
CSS
.tone {
display: block;
background: blue;
width: 100px;
text-align: center;
color: #fff;
}
.tone__pack {
display: none;
width: 100px;
height: 100px;
background: red;
}

You can use .show() instead of toggle.
fiddle
$(document).ready(function() {
$(".tone").click(function(e) {
e.preventDefault();
var tab = $(this).attr("id");
$(".tone__pack").not(tab).css("display", "none");
$(tab).show();
});
});
.tone {
display: block;
background: blue;
width: 100px;
text-align: center;
color: #fff;
}
.tone__pack {
display: none;
width: 100px;
height: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tone" id="#tone1">
Button 1
</div>
<div class="tone__pack" id="tone1">
</div>
<div class="tone" id="#tone2">
Button 2
</div>
<div class="tone__pack" id="tone2">
</div>

Toggle it only when its pack is hidden, like so:
$(document).ready(function() {
$(".tone").click(function(e) {
e.preventDefault();
var tab = $(this).attr("id");
if($(".tone__pack"+tab).is(":hidden")) {
$(".tone__pack").not(tab).css("display", "none");
$(tab).toggle();
}
});
});
.tone {
display: block;
background: blue;
width: 100px;
text-align: center;
color: #fff;
}
.tone__pack {
display: none;
width: 100px;
height: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tone" id="#tone1">
Button 1
</div>
<div class="tone__pack" id="tone1">
</div>
<div class="tone" id="#tone2">
Button 2
</div>
<div class="tone__pack" id="tone2">
</div>

I modified your code like this,
When the tab is opened, I will add one class to identify that it is already opened.
when again a click event is detected, if it already contains the class, the will not do anything,else I will do as required.
$(document).ready(function() {
$(".tone").click(function(e) {
e.preventDefault();
var tab = $(this).attr("id");
$(".tone__pack").not(tab).css("display", "none");
// removing class, if it is present in any other tab
$(".tone__pack").not(tab).removeClass("active");
//if it is already opened, then return
if($(tab).hasClass("active")){
return;
}
//add identifier for next iterations
$(tab).addClass("active");
$(tab).toggle();
});
});

Button click Triggers Text Below

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

FadeIn and FadeOut effect to toggle boxes

http://codepen.io/anon/pen/Nqbdap
Guys, i made this simple code and there is something wrong with him, and i can't.. i just can't figure out why.
In the first toggle change, the box one will disappear without the fadeOut effect, them will work normally.
Code:
var clickHandler = function(e) {
var target = $(this).data('open');
var box = $('.box');
var active = 'box__active';
if (!(box.eq(target).hasClass(active))) {
box
.fadeOut(500, function() {
box.removeClass(active)
});
box.eq(target)
.delay(500).fadeIn(500, function() {
box.eq(target).addClass(active);
});
}
e.preventDefault();
};
$(document).on('click', '[data-open]', clickHandler);
.box {
width: 50px;
height: 50px;
border: 1px solid black;
display: none;
}
.box__active {
display: inline-block;
}
a {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<a data-open="0">Open one</a><br/>
<a data-open="1">Open two</a><br/>
<a data-open="2">Open three</a><br/>
<br/>
<br/>
<br/>
<div class="box box__one box__active">One</div>
<div class="box">Two</div>
<div class="box">Three</div>

I think you should know that .eq() in jquery start index with 0 not with 1 .. so if I understand well you should use
var target = $(this).data('open') - 1;
and for better code use .parseInt
var target = parseInt($(this).data('open')) - 1;
DEMO HERE
you just need to use $(this)
$(this).removeClass(active);
$(this).addClass(active);
DEMO HERE

I changed your code a bit. Now it is working at first time.
var clickHandler = function(e) {
var target = $(this).data('open');
var box = $('.box');
box.fadeOut(500);
box.eq(target).delay(500).fadeIn(500);
e.preventDefault();
};
$(document).on('click', '[data-open]', clickHandler);
.box {
width: 50px;
height: 50px;
border: 1px solid black;
display: none;
}
a {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<a data-open="0">Open one</a><br/>
<a data-open="1">Open two</a><br/>
<a data-open="2">Open three</a><br/>
<br/>
<br/>
<br/>
<div class="box" style="display:inline-block;">One</div>
<div class="box">Two</div>
<div class="box">Three</div>

Drop Down Menu Issue

I am writing a drop-down menu for the school intranet site and I have created a rather strange issue. The sub-menus are offset from the selected menu y position by 36px.
Here's a excerpt of the code (please excuse the quality :D)
<html>
<head>
<style>
#navagationBar {
margin: 0;
padding: 0;
z-index: 30;
}
#navagationBar li {
list-style: none;
float: left;
font: bold 12px 'Arial';
margin-left: 10px;
width: 96px;
}
#navagationBar li a {
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 136px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
#navagationBar li a:hover {
background: #796952;
}
#navagationBar div {
position: absolute;
visibility: hidden;
background: transparent;
}
#navagationBar div a {
position: relative;
display: block;
padding: 5px 10px;
width: 136px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #796952;
color: #FFF;
font: 9px "Arial";
}
#navagationBar div a:hover {
background: #969696;
color: #FFF;
}
#navagationBar a {
color: #FFF;
}
div.navagation {
background: #2d221c;
height: 28px;
}
div.sub {
left: 156px;
}
</style>
<!-- BG COLOR: #2d221c
FORERGROUND: #3c3429
HOVER: #796952
-->
<script>
var menuItem = 0;
var subItem = 0;
var timeLimit = 250;
var closeTimer = 0;
var closeSubTimer = 0;
// open menu
function openMenu(id) {
stopTimer();
// If a layer is already open close it
if (menuItem) {
menuItem.style.visibility = 'hidden';
}
// Then set the one clicked on by the user to be shown
menuItem = document.getElementById(id);
menuItem.style.visibility = 'visible';
}
function openSub(id) {
stopSubTimer();
// If a layer is already open close it
if (subItem) {
subItem.style.visibility = 'hidden';
}
subItem = document.getElementById(id);
subItem.style.visibility = 'visible';
}
function close() {
if (menuItem) {
menuItem.style.visibility = 'hidden';
}
}
function closeSub() {
if (subItem) {
subItem.style.visibility = 'hidden';
}
}
function startTimer() {
closeTimer = window.setTimeout(close, timeLimit);
}
function startSubTimer() {
closeSubTimer = window.setTimeout(closeSub, timeLimit);
}
// Stop timing
function stopTimer() {
if (closeTimer) {
window.clearTimeout(closeTimer);
closeTimer = null;
}
}
// TODO: Make more modular
function stopSubTimer() {
if (closeSubTimer) {
window.clearTimeout(closeSubTimer);
closeSubTimer = null;
}
}
// If the user click out, close teh box
document.onclick = close();
document.onclick = closeSub();
</script>
</head>
<body>
<div class="navagation">
<ul id="navagationBar">
<li>HSIE
<div id="menu0" onMouseOver="stopTimer()" onMouseOut="startTimer()">
Business Studies
<div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
<a href='view.php?id=110'>Year 11</a>
<a href='view.php?id=109'>Year 12</a>
</div>
Commerce
<div class='sub' id="submenu0_1" onMouseOver="openSub('submenu0_1')" onMouseOut="startSubTimer()">
<a href='view.php?id=112'>Year 9</a>
<a href='view.php?id=111'>Year 10</a>
</div>
Geography
<div class='sub' id="submenu0_2" onMouseOver="openSub('submenu0_2')" onMouseOut="startSubTimer()">
<a href='view.php?id=48'>Year 7</a>
<a href='view.php?id=92'>Year 8</a>
<a href='view.php?id=105'>Year 9</a>
<a href='view.php?id=70'>Year 10</a>
<a href='view.php?id=69'>Year 11</a>
<a href='view.php?id=131'>Year 12</a>
</div>
History
<div class='sub' id="submenu0_3" onMouseOver="openSub('submenu0_3')" onMouseOut="startSubTimer()">
<a href='category.php?id=89'>Junior</a>
<a href='category.php?id=90'>Senior</a>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

Try putting the sub menu divs before the corresponding a tags (instead of putting these divs after them).
For instance, try this:
<div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
<a href='view.php?id=110'>Year 11</a>
<a href='view.php?id=109'>Year 12</a>
</div>
Business Studies
Instead of this:
Business Studies
<div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
<a href='view.php?id=110'>Year 11</a>
<a href='view.php?id=109'>Year 12</a>
</div>

DOM Access
First, you have to make absolutely sure to not access the DOM by getElementbyId(); before the whole page has loaded.
You have to invoke the script right before the closing body tag or wrap your whole code in one function and invoke it at the end, right before the closing body tag. This is Yahoo! and Google Front-End Development best practice.
Alternatively you could use JQuery's $(document).ready() function or another JavaScript library's document-loaded function. Using a library for addressing just this issue, however would be overkill.
Global Variables
By declaring var menuItem = 0; outside the function scope, you declare the variable as a global, which is a very bad thing! It will clutter your entire Web site's namespace. Declare variables inside a function to create a closure.
Also you don't want to initialise your menuItem variable with an integer, because you will reference an object later on (a DOM object). Albeit Javascript doesn't need types to be dclared and this will work, it is creating confusion with the reader of the code. Just use var menuItem; inside the function.
CSS Block Formatting Context
Try using display: inline or display: block with your HTML elements. Make sure to read and understand the W3C CSS Visual formatting model.

You have individual IDs for each sub level so you could add styling for each.
#submenu0_0 > a {top:0px;}
#submenu0_1 > a {top:25px;}
#submenu0_2 > a {top:50px;}
#submenu0_3 > a {top:75px;}

Is this due to quirks mode?
Try using a proper doctype like this:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>