store articles in javascript variables - javascript

so i have 3 articles from a local newspaper i want user to click a button and the content of the page switch, i wrote my script the first time i click any of the buttons it will switch the content for me but when clicking any button after that i get no results
my src code is something like
<div id="banner">
<div id="nav">
<ul>
<li><button onclick="one()">one</button></li>
<li><button onclick="two()">two</button></li>
</ul>
</div>
<div id="thewholetext">
<p id="a">
//an article here
<p id="b">
// a 2nd article here
</div>
</div>
and the java script is like
function one () {
document.getElementById("thewholetext").innerHTML = a.innerHTML;
}
function two() {
document.getElementById("thewholetext").innerHTML = b.innerHTML;
}
the idea is i have the div called "the whole text" which contain the two articles each article with unique id so i can control and display only one of them when user clicks a its corresponding button
i hope its clear. thanks in advance

<html>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<style>
p{
display:none;
}
</style>
<script>
$(document).ready(function(){
$("button").on("click",function(e){
$("p").hide();
$("p#"+this.id).show();
});
});
</script>
<body>
<div id="nav">
<ul>
<li><button id="one">one </button> </li>
<li><button id="two">two </button> </li>
</ul>
</div>
<div id="thewholetext">
<p id="one">
//an article here
</p>
<p id="two">
// a 2nd article here
</p>
</div>
</div>
</body>
</html>

Try to declare your function like this
$("button").click(function(e) {
if (e.target.id == "one") {
$("#a").show();
$("#b").hide();
} else {
$("#a").hide();
$("#b").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li>
<button id="one">one </button>
</li>
<li>
<button id="two">two </button>
</li>
</ul>
</div>
<div id="thewholetext">
<p id="a" style="display:none;">
//an article here
</p>
<p id="b" style="display:none;">
// a 2nd article here
</p>
</div>
Hope it helps :)

// Cache buttons and articles
var buttons = document.querySelectorAll("[data-showid]"),
allArticles = document.querySelectorAll(".article");
function toggleArticle(event) {
event.preventDefault(); // Prevent document scrollTop
var id = this.dataset.showid,
article = document.getElementById( id );
[].forEach.call(allArticles, function( art ) {
art.style.display = art === article ? "block" : "none";
});
}
// Button clicks
[].forEach.call(buttons, function( btn ) {
btn.addEventListener("click", toggleArticle, false);
});
.hidden{display:none;}
[data-showid]{ color:red; cursor:pointer; }
<a data-showid="article1">One</a>
<a data-showid="article2">Two</a>
<p id="article1" class="article">This is article ONE</p>
<p id="article2" class="article hidden">This is article TWO</p>

Related

Javascript hide/show div

I have a javascript hide/show div with 4 different divs going. It is working partially but not performing the way I would like. When I click one of the divs it opens up the hidden div, which is perfect, but when I click the other link to open up the other div I want the other one I clicked first to close and then the new one to open. Here is my javascript.
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggle('hide');
});
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb">
<hr class="dark2">
<p></p>Whats in the Bag <i class="fa fa-angle-down" style="font-size:24px"></i></p>
</div>
</div></a>
<div id='content2' style="display:none">
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
</div>
// Hopefully you have some selector reference to target them all
var $all = $(".drops"); // Clearly I used .drops for example
$('[data-value]').on('click', function(event) {
var $target = $('#'+ this.dataset.value);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
Here's an improved example:
var $all = $(".togglable");
$('[data-toggle]').on('click', function(event) {
var $target = $(this.dataset.toggle);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;}
.hidden{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="#el1">TOGGLE1</a>
<a data-toggle="#el2">TOGGLE2</a>
<a data-toggle="#el3">TOGGLE3</a>
<div id="el1" class="togglable hidden">ELEMENT1</div>
<div id="el2" class="togglable hidden">ELEMENT2</div>
<div id="el3" class="togglable hidden">ELEMENT3</div>
Please try this
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});
It will be better if you could give your divs a common class instead of ids so you could hide other divs using this common class like :
$('.common_class').addClass('hide');
If you cant you could loop through all the divs and hide them before showing the current clicked one :
$('[id^="hideshow"]').on('click', function(event) {
$('[id^="hideshow"]').each(function(){
$('#'+$(this).data('value')).addClass('hide');
});
dataValue_id = $('#'+$(this).data('value'));
$(dataValue_id).toggleClass('hide');
});
Hope this helps.
Snippet using common classes :
$('.common_class').on('click', function(event) {
$('.common_class_2').not($('.common_class_2', this)).addClass('hide');
$('.common_class_2', this).toggleClass('hide');
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='common_class'>DIV 1
<p class='common_class_2'>Content 1</p>
</div>
<div class='common_class'>DIV 2
<p class='common_class_2 hide'>Content 2</p>
</div>
<div class='common_class'>DIV 3
<p class='common_class_2 hide'>Content 3</p>
</div>
<div class='common_class'>DIV 4
<p class='common_class_2 hide'>Content 4</p>
</div>

Refresh a div without a full page been refreshed?

Is it possible to refresh a div on a click of a button and not auto refresh?
Once I've printed #print-container I would like to refresh #print-container to its original state without refreshing the whole page.
<body onLoad="renderTime();">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" id="printarea" >
<div id="print-container">
<div class="item"></div>
<div class="total"></div>
</div>
</div>
<div class="col-xs-8">
<ul class="final">
<li class="remove"><input type="submit" value="Remove Last" class="print-btn remove-item"></li>
<li class="remove"><input type="submit" value="Refresh" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></li>
</ul>
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="content">
<ul class="sub-menu">
<li><button class="menu item1">Item 1</button></li>
<li><button class="menu item2">Item 2</button></li>
</ul>
</div>
<!--END BEER-->
</div><!--end box-->
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".menu a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).fadeIn(5);
});
</script>
<script type="text/javascript">
//add item
$('.item1').click(function(){
$('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');
counter();
});
$('.item2').click(function(){
$('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');
counter();
});
</script>
<script type="text/javascript">
var counter = function() {
var total = 0;
$(".skill").each(function() {
total += + parseInt($(this).text() , 10);
});
$('.total').text('Total: \u0E3F' + total);
};
</script>
<script type="text/javascript">
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
</script>
</body>
If your div is loaded from an external source (doesn't matter if it's on the same server or not) you can use the jQuery function load() to "refresh" the div.
For example - if your div loads some content from the file content.html, then you can use jQuery to reload the div's content:
$("#button-id").click(function() {
$("#div-id").load("content.html");
});
It's as simple as that!
Here's a simple plugin that caches div content inside it's own attribute, and reverts back on event
(function($, window){
var nodes = $('[reload]'); // all <div reload=""/> elems
var serializer = new XMLSerializer(); // serializer
nodes.each(function(){ // iterate over all elems
var domStr = serializer.serializeToString($(this)[0]); //serialize html to str
$(this).attr('cache', domStr.replace(/\n/g, '')); // remove new-line
$(this).click(function(){ // event
$(this).html($(this).attr('cache')); // restore content of div
});
});
// demoPurpose: modify div, add attribute(style), change text
$('#style').click(function(){
$(nodes[0]).children().first().css('color', randomColor());
$(nodes[0]).children().last().css('color', randomColor());
$(nodes[1]).children().first().css('color', randomColor());
$(nodes[1]).children().last().css('color', randomColor());
$(nodes[1]).children().last().text(Date.now());
});
// demoPurpose: simple random colorizer
function randomColor(){
var colors = ['red', 'blue', 'green', 'yellow', 'black', 'pink'];
return colors[Math.floor(Math.random() * colors.length)];
}
})(jQuery, window);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div reload="">
<h1>h1</h1>
<p>p</p>
</div>
<hr />
<div reload="">
<h1>another h1</h1>
<p>with dummy p</p>
</div>
<hr />
<p><button id="style">style</button><small>Click on button to change div</small></p>
<p><small>Click on div to reload it's content</small></p>
Although it might seem quite heavy, this should help you to understand the idea behind

Showing and hiding text in response to a button click

The code below does this. When I click the button for the first time, it shows the respective text. And when I click the same button again, it fades out and fades in. However, I want the respective text to disappear if the button is clicked the second time instead of fading out and then fading in.
$(document).ready(function(){
$('.info').click(function(){
$(this).next().fadeOut("slow");
$(this).next().fadeIn("slow");
});
});
HTML:
<div>
<a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
<h1 class="infoText" style="display:none">text 1</h1>
</div>
<div>
<a class="info" href="javascript:void(0);">header 2</a>
<h1 class="infoText" style="display:none">text 2</h1>
</div>
<div>
<a class="info" href="javascript:void(0);">header 3</a>
<h1 class="infoText" style="display:none">text 3</h1>
</div>
It should start like this:
header1
header2
header3
When I click header1, it should be like this:
header1
text1
header2
header3
And when I click header 1 again, it should be like this:
header1
header2
header3
Anybody know how to do this?
You can use fadeToggle() to toggle the display with fade effect
$(document).ready(function() {
$('.info').click(function() {
$(this).next().fadeToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
<h1 class="infoText" style="display:none">text 1</h1>
</div>
<div>
<a class="info" href="javascript:void(0);">header 2</a>
<h1 class="infoText" style="display:none">text 2</h1>
</div>
<div>
<a class="info" href="javascript:void(0);">header 3</a>
<h1 class="infoText" style="display:none">text 3</h1>
</div>
You can use toggle() for this purpose. It will hide the element if it is already shown, otherwise it will shows the element.
$('.info').click(function(){
$(this).next().toggle("slow");
});
You can use toggle() Function:
$(document).ready(function() {
$('.info').click(function() {
$(this).next().fadeToggle("slow");
});
});
DEMO
$('.info').click(function(){
//$(this).next().fadeOut("slow");
$(this).next().toggle("slow");
});
Use toggle to hide and show something
AS per suggestion of #Tushar
$('.info').click(function(){
//$(this).next().fadeOut("slow");
$(this).next().fadeToggle("slow");
});
You Try this code
$(document).ready(function() {
$('.info').click(function() {
var _self = $(this);
if(_self.hasClass("active")) {
_self.next().fadeOut("slow");
_self.removeClass("active");
} else {
_self.next().fadeIn("slow");
_self.addClass("active");
}
});
});
Working Demo

Onmouseover on HTLML li tag

I'm new to asp.net (and to stack overflow :) ) and I want a hint element to be shown on onmouseover event of li tags. I don't know how to set the position of the hint element. My code is something like this:
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
document.getElementById("agentVisit").style.display = "block";
document.getElementById("agentVisit").offsetLeft = e.offsetLeft; /*e.????*/
document.getElementById("agentVisit").offsetTop = e.offsetTop; /*e.????*/
};
</script>
<div class="node">
<div class="taxonomy"></div>
<div class="content">
<div id="contact-map">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)">
<a "blabla">
<span class="hideme">city name</span>
</a>
<p class="hideme"> city name <strong class="tel">123456789</strong></p>
</li>
/*other list items*/
</ul>
</div>
<div class="hr">
</div>
Unless you need a very good looking design to show your hint, you can use
<li title="city name">
update:
Check if it helps:
http://jsfiddle.net/ysuw5/91/

jquery toggle between divs and subsequently hide active div

a play on a similar question asked by me that was graciously answered.
three divs, all hidden. jquery toggles between them via different links. this works great! now, i'd like to clink the link corresponding to the active div and hide it, esentially the same as when the page loads with all of them hidden. right now it fades out and back in.
help! thank you!
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<div id="content">
<div class="current" id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
</div>
Javascript:
$(function(){
$('#about').css('display', 'none');
$('#subscribe').css('display', 'none');
$('#contact').css('display', 'none');
});
$('.home').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});
Try this out..
Since on fadeOut the current class is removed, if the size of current is 0 it means nothing is selected. We can simply fadeIn the content div.
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function(){showContent($content)});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
Example on jsfiddle.
Here is another approach:
$(function(){
$('#content div').hide();
});
$('.home').click(function(){
var targetSelector = '#' + $(this).attr('title').toLowerCase();
var targetShown = $(targetSelector).is(':visible');
if (targetShown) {
$(targetSelector).fadeOut(600);
} else {
$('#content div:not(' + targetSelector + ')').fadeOut(600,
function() {$(targetSelector).fadeIn(600)});
}
});
Check to see if the id of the clicked element is equal to the id of the element currently being displayed (i.e. the element with the current class). If it is a different element, then a swap needs to take place. If it is the same element, then it needs to be hidden and have its current class removed...
(Edit: fixed code)
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<br />
<br />
<br />
<div id="content">
<div id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
<div class="current" id="dummy"></div>
</div>
JS:
$().ready(function()
{
$('#about').hide();
$('#subscribe').hide();
$('#contact').hide();
$('#dummy').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
if ($('.current').length >0) {
if($('.current')[0].id.toLowerCase() != id)
{
$('.current').hide();
$('.current').removeClass('current');
$('#'+id).addClass('current');
$('#'+id).show();
}
else
{
$('.current').hide();
$('.current').removeClass('current');
$('#dummy').addClass('current');
}
}
});
});
Just replace the .hide()'s and .shows()'s with fades in and out.

Categories