Showing a Div Once per visit - javascript

On my website I have a slider to only show on the Homepage. My home page looks something like this:
<body>
<div class="wrapper">
<div class="header"></div>
<div class="slider"></div>
<div class="maincontent"></div>
</div>
</body>
My Pages are the same layout, except I only want the Slider div to show on the first page. So when the user first arrives to the website, they can see the slider, but if they go to a different page, the slider is gone.
I was wondering if there was a way to do that with, jquery? Cookies? If anyone has any suggestions, please let me know how I would do this. Thanks!

Yes, there is a way to do this. In fact, there are multiple ways. You can do it both using Javascript and a server-side scripting language like PHP. I recommend using a server-side scripting language, because there's no point in adding an element to a page if it isn't used, while it does take up a tiny amount of bandwidth. Anyways, an example using both methods follows:
Using PHP:
<body>
<div class="wrapper">
<div class="header"></div>
<?php
if (!isset($_COOKIE['visisted'])) {
setcookie('visited', true, time() + 3600 * 24); // Save a cookie for 1 day
echo '<div class="slider"></div>';
}
?>
<div class="maincontent"></div>
</div>
</body>
And using Javascript:
<head>
<style type="text/css">
div#slider {
/* Hide the div */
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="slider"></div>
<div class="maincontent"></div>
</div>
<script type="text/javascript">
var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
var expiration = new Date();
expiration.setDate(expiration.getDate()+1);
document.cookie = 'visited=1;expires=' + expiration + ';path=/';
var element = document.getElementById('slider');
element.style.display = 'block';
}
</script>
</body>
By the way, I assume this isn't your whole HTML page? Because obviously you should add a doctype, tags, etc.

Sure, you can use:
Cookies, that can be accessed from js
HTML5 WebStorage, which is a great place too, but works only on new browsers

If you aren't bound to browsers I'd recommend to use the HTML5 LocalStorage variable.
http://www.w3schools.com/html/html5_webstorage.asp
However if you are supposed to be browser independent (support IE6 etc.)
I would go with cookies or a database with visited IP's.

Related

How to output content in real-time using jquery and ajax

I would like to refresh the content within a block which is outputted by <?php print "R";print_r($convert->toCurrency('ZAR', 1));print " / $";print_r($convert->toCurrency('USD', 1)); ?>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-red">
<span class="info-box-icon"><i class="fa fa-info-circle"></i></span>
<div class="info-box-content">
<span class="info-box-text">1 BTC = ZAR/USD</span>
<span class="info-box-number"><?php print "R";print_r($convert->toCurrency('ZAR', 1));print " / $";print_r($convert->toCurrency('USD', 1)); ?></span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
What I have tried so far:
added :
<script type="text/javascript">
function loadlink(){
$('#in-content').load('main_con.php',function () {
$(this).unwrap();
});
}
loadlink();
setInterval(function(){
loadlink()
}, 5000);
</script>
I've placed the content into one div and have it an id of in-content.
it works, although when it refreshes it is not a smooth refresh as well as the css starts changing and moving the content out of place. Which is weird since its not refreshing the css but simply refreshing the content within php tags.
Any ideas on how to go about keeping a connection open and display the content in real time, and without any changes to outputted display.
any help would be appreciated :)
You can certainly use websockets like Taplar has suggested but it comes with its headaches (server support, connections etc), but you don't really need that for simple updates of few elements.
I have used Ajax requests in the past with high fps without issues, here is what you can do:
Wrap your statements with spans or divs:
<span class="info-box-number"><span id='conversions'></span></span>
Call the server to get json
<script type="text/javascript">
function loadlink(){
$.get( "data.php", function( data ) {
$( "#conversions" ).text(data.conversions)}, "json" );
}
loadlink();
setInterval(function(){
loadlink();
}, 5000);
</script>
Write an endpoint on the server data.php that returns json with conversions as property that has your data.
I wouldn't render any html on the server, if you have multiple data elements return them as different properties of your json object and replace them within loadlink
There should be no refresh issues or css issues if all your html was formatted nicely
Wrap contents into a div
<span class="info-box-number"><div id='btc-to-fiat'></span></span>
JavaScript to refresh the content without tampering with css when displayed
<script type="text/javascript">
var refresh = setInterval(
(function () {
$("#btc-to-fiat").load("main_con.php");
}), 1000);
</script>

HTML - link to open page, then to anchor on that page

I'm working on a fairly extensive local website. It is not on a web server, and I am more or less restricted to HTML and JavaScript.
I have a side navigation menu on all the pages that is called with this statement:
<script type="text/javascript" src="menu/menu.js"></script>
menu.js is essentially a list of links like this:
document.write("<a href='page5.html#part1'>Part 1</a>");
In place on all the pages is a sticky header script that is making linking to anchors cumbersome. If you're currently on the page the link is linking to and ABOVE the anchor the link is linking to, it works fine. But if you're currently below the anchor on the same page, it gets glitched up. It doesn't take you to where it should.
There's probably another way to do it, but I feel like an easy-to-implement solution would be to create a link that first opened the page at the top, and THEN took you to the anchor.
I tried using #Qwerty's solution from this question ([Force page reload with html anchors (#) - HTML & JS), but it didn't work. I tried this:
document.write("<a href='page5.html#part1' onclick='location.reload()'>Part 1</a>");
I'm guessing it didn't work because of it being local and/or because of the link being read from a JS file.
Example
For simplicity's sake, let's say there are 3 pages on the site and each page has 3 anchors on it. I want this external JS menu to be on and work on all pages. It has these links:
page1.html#part1
page1.html#part2
page1.html#part3
page2.html#part1
page2.html#part2
page2.html#part3
page3.html#part1
page3.html#part2
page3.html#part3
The Snippet below is for ease of reference there's more involved with this than what is in the Snippet. If you like a live demonstration go to this PLUNKER.
The first page must be index.html as a requirement of the website, but you may name your pages however you want on your PC. Keep in mind the links do not include index.html because I'm too lazy to include it, it would mean writing code that wouldn't be useful for you.
// Code goes here
var pages = 5;
var parts = 3;
var pg = [];
var pt = [];
var menu = document.getElementById('menu');
var i, j;
for (i = 0; i < pages; i++) {
var page = 'page' + (i+1);
pg.push(page);
for (j = 0; j < parts; j++) {
var part = 'part' + (j+1);
pt.push(part);
var url = pg[i] + '.html#' + pt[j];
var anchor = document.createElement('a');
anchor.href = url;
anchor.textContent = 'Page ' +(i+1) + ' Part ' +(j+1) ;
menu.appendChild(anchor);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Index</h1>
<nav id='menu'></nav>
<section id='part1'>
<h2>Part1</h2>
</section>
<section id='part2'>
<h2>Part2</h2>
</section>
<section id='part3'>
<h2>Part3</h2>
</section>
<script src="menu.js"></script>
</body>
</html>
This may either be brutally irrelevant to your question or give you an idea, how your app could be structured better. To handle your navigation needs, you don't need Javascript. But you can add it to the mix to improve this solution with nice gimmicks.
<html>
<head>
<title>one-page-app</title>
<style>
.pages {
display: none;
}
.pages:target {
display: block;
}
</style>
</head>
<body>
<nav>
<p>Main Menu:</p>
Home
FAQ
External content (other file)
</nav>
<a name="home"></a>
<div id="home" class="pages">
<h1>Home</h1>
<p>Hi. Check FAQ to see how it's working.</p>
</div>
<a name="faq"></a>
<div id="faq" class="pages">
<h1>FAQ</h1>
<ul>
<li>
<h2>How does it work?</h2>
<p>The magic of the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:target">:target pseudo-class in CSS</a>.</p>
</li>
<li>
<h2>What if I have more content?</h2>
<p>
I've worked with 2-3 MB html files without a problem. That's when smartphone browsers were really choking. ;) For local pages, loading time is no issue after all.</p>
</li>
<li>
<h2>What about REALLY old browsers?</h2>
<p>They will see all the content at once, but due to the anchors, the main menu will still work. Add "back to top" links to the pages if you want.</p>
</div>
<a name="external"></a>
<iframe id="external" class="pages" src="http://google.com"></iframe>
</body>
</html>
EDIT - after question-edit:
If you want to keep your current structure, you could just do:
<a name="page1_1"></a>
<iframe id="page1_1" class="pages" src="page1.html#part1"></iframe>
<a name="page1_2"></a>
<iframe id="page1_2" class="pages" src="page1.html#part2"></iframe>
and so on.

How to change static text in a web page using inner html?

I have some text in a website that I want to change using javascript because I can't change it any other way.
In short, the site is laid out like such:
...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
<div class = "hero-unit">
<h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
</div>
</div>
...more divs, footer, etc...
I don't need the text to change on click or anything like that I just want it to be set on load to something different than Support Center but I'm not sure if I'm placing the script in the correct place or if the syntax is wrong?
I've tried placing it before and after and it doesn't seem to work. Here is the code:
<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>
Thank you.
Looking at the actual source of your page, your page does not contain a h1 element with a class of title.
Your actual source code
<div id="header" class="container-fluid clearfix">
<div class="hero-unit"></div>
<div class="container-fluid clearfix">
<div class="row-fluid">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
</div>
</div>
</div>
This means it does not exist till some point after your page loads. You need to put your code after the code that generates the h1 title element
In jQuery (if you can use it), you'd use something like
$("#title").text("Something else");
it looks like you are not getting the specific class to change the html
try with querySelector like i have done
JS Fiddle
var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";

incorporating scrolling feed twitter style

I'm trying to make a twitter like system that scrolls through info slowly and then repeats.
I have it down(kinda) thanks to this tutorial. I have it working on its own and I added my own content but when I try adding it to my webpage it takes a c*** on me and throws all of my content all together at the top of the page. Any suggestions?
<div class="header">
<h2><span>Resteruant Consulting</span></h2>
<h1>Tasty Solutions</h1>
</div>
<div class="content">
<DIV align=center style="background:#fff">
<DIV id="tempholder"></DIV>
<SCRIPT language=JavaScript
src="dhtmllib.js"></SCRIPT>
<SCRIPT language=JavaScript
src="scroller.js"></SCRIPT>
<SCRIPT language=JavaScript
src="mydata.js"></SCRIPT>
<SCRIPT language=JavaScript>
//SET SCROLLER APPEARANCE AND MESSAGES
function runmikescroll() {
var layer;
var mikex, mikey;
// Locate placeholder layer so we can use it to position the scrollers.
layer = getLayer("placeholder");
mikex = getPageLeft(layer);
mikey = getPageTop(layer);
// Create the first scroller and position it.
myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(200);
myScroller1.show();
}
window.onload=runmikescroll
</SCRIPT>
<center><DIV id='placeholder'></DIV></div></DIV></center>
</div>
I have all the other javascript in the same directory. I have javascript enabled in my web browser, and it works on its on its just when I incorporate it into my index.html it gets screwy.
each headline has a "position:absolute", perhaps if you put those headlines in a div with
position:relative;
so the headlines at least will stay just in that div.
if I'm wrong pardon me, if I'm right let me know.

How to show hidden content where the contents images don't load until the content is shown?

What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.
EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)
To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).
First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/
Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.

Categories