There's a greeting loader that appears for some seconds on the homepage of my site. but i don't want it repeating it everytime the user comes to the home.
<div id='sliderloader'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<img src='Rf8YpZW.jpg' style='z-index:-1;position:absolute;margin-top:-300px;'/>
<img src='/assets/manivel60.gif' style='position:relative;margin-top:-121px;margin-left:512px;'/>
</b:if>
<div id='progressbg'>
<div id='loader'></div>
</div>
</div>
It's already set to not repeat in subsequent pages, but every time I go to home the loader comes again.
Any idea of how to make this whole code happen just once? (When the home is accessed from inside the page, and appear when accessed from outside.)
If you only want the greeting loader to appear when a user navigates to your home page from a page outside your website, write some JavaScript that checks the referrer and compares it to your URL, displaying the loader only for new users:
if (document.referrer.indexOf(location.protocol + "//" + location.host) === 0) {
document.getElementById('loader').style.display = 'none';
} else {
document.getElementById('loader').style.display = 'block';
}
Related
I have an image button in a div when click I want to hide image button and somehow store to local storage not to show div again on page refresh.
<div class="whatsapp"><a href="https://chat.whatsapp.com/........." target="_blank">
<img src="/img/whatsapp_group.png" alt="Whatsapp Join Button"><div class="whatsappbut">To Find Out MORE!</div></a></div>
I added an ID(id="img-btn") to your div to use it in script tag. If user didn't click on your image button so far, localStorage.getItem('img-btn-clicked') will return null otherwise it'll return 'true'(as we set it in saveClicked function).
Just make sure to put the script tag before the body tag ends(or you can link a separated Javascript file).
<body>
<div id="img-btn" class="whatsapp">
<a href="https://chat.whatsapp.com/........." target="_blank">
<img src="/img/whatsapp_group.png" alt="Whatsapp Join Button" />
<div class="whatsappbut">To Find Out MORE!</div></a>
</div>
<script>
checkImgBtnClicked();
function checkImgBtnClicked() {
const clicked = localStorage.getItem('img-btn-clicked'); // if this is not set it will return null
if (clicked) {
document.getElementById('img-btn').style.display = 'none'; // hides the img-btn
} else {
// add event listener for image button click(saveClicked function will be executed if user clicks on image button
document.getElementById('img-btn').addEventListener('click', saveClicked);
}
}
function saveClicked() {
// set a flag in local storage that image button is clicked
localStorage.setItem('img-btn-clicked', 'true');
document.getElementById('img-btn').style.display = 'none'; // hides the img-btn after it gets clicked
}
</script>
</body>
Home page of my web has 2 url:
https://test/demo1/ or https://test/demo1/home
In home page i link to other page:
<a href="carts" >Link 1</a>
If i run home page is : https://test/demo1/ link open is https://test/carts
If i run home page is : https://test/demo1/home link open is https://test/demo1/carts
How can set relative href of tag a, to always open link https://test/demo1/carts?
You can just call a function to add the attr or using jQuery to update the href
function cartBtn(){
var currURL = window.location.href;
var link = document.getElementById("cartLink"); //test/demo1/home// you a to cart
if(currURL.indexOf("home") < 0){
window.location = currURL+"/home/cart" ;
}else {
window.location = currURL+"/home";
}
}
<a id="cartLink" href="#" onclick="cartBtn()"> click me </a>
An easy way to fix this would be to have the URL you don't want redirect to your normal URL. Add the following, changing what you want where I have pointed:
<meta http-equiv="refresh" content="3; url="file.html" />
^^^^^^^^^
This is a commonly used element, I personally use this a lot in my website.
Just ask if any bit is unclear. But before you do, look here:
http-equiv: This essentially says that this element redirects the page.
content: The number of seconds until the redirect (3) and the page to redirect to (file.html)
I'm trying to use Lightbox's title function as a simple way to put PDF download links and website URLs so that people are able to see designs in full detail and actually visit interactive websites they've seen as images. I do it this way:
<a href="projects/img_full/my_project.png" data-lightbox="project1" data-title="<a href='http://example.com/' target='_blank'>Visit site</a>">
<img src="projects/thumbs/my_project.png" alt="Project 1" />
</a>
The link outputs correctly under the Lightbox's image, and target='_blank' remains if I inspect it in my browser. However, the link still opens in the same tab.
Why does this happen? Is there a way to avoid it?
I have the same problem, on my project page I have gallery of places, and in title I have an url to wiki site with description of current place, when I click on the link page opens in the same window, in firebug everything looks fine (with attribute target etc.)
I found something in Lightbox library that I think is responsible for running urls
// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. #https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title)
.fadeIn('fast')
.find('a').on('click', function(event){
location.href = $(this).attr('href');
});
}
but I'm not 100% sure that is this, could someone show where I can update code and depened opening links by the "target" attribute?
EDIT:
ok, found solution to this, need to replace code above with this and it works for me, found it on github
https://github.com/lokesh/lightbox2/pull/299/files
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title)
.fadeIn('fast')
.find('a').on('click', function (event) {
if ($(this).attr('target') !== undefined) {
window.open($(this).attr('href'), $(this).attr('target'));
} else {
location.href = $(this).attr('href');
}
});
}
I am trying to create chrome extension which will read text inside the particular TAG from the Webpage ...
but not able to read value
I need to pick Text inside the tag definition excluding html tags..
here i want to read the value from the tag "definition"
output:is an overwhelming urge to have of something is often connected with money
suppose web page is like this
<div id="definition">
<div class="section blurb">
<p class="short"><i>Greed</i> is an overwhelming urge to have <i>more</i>
of something
<p class="long"><i>Greed</i> is often connected with money</p>
</div>
</div>
this is what i was trying
popup.html
<script>
var newwin = chrome.extension.getBackgroundPage();
newwin.get();
</script>
background.html
<Script>
function get()
{
var myDivObj = document.getElementById("definition");
if ( myDivObj ) {
alert (myDivObj.innerHTML);
}else{
alert ( "Alien Found" );
}
}
</Script>
I moved my script from the background page to content scrit and it worked like charm..
but was just wondering why dint work in background page..?
I have a website which contains the cute conceit of a random headshot. Every time you load the page (or click the headshot), it gets replaced with a new headshot. It works great until I post a link to the website on Facebook.
What happens then is when Facebook scans the page for images, it doesn't find the random image, I assume because it doesn't run the scripts. I would love for the facebook thumbnail to also have a random image.
Is there any way to solve this without resorting to server side code?
Here's what I do now:
in head-script section
var lastTimeout = 0;
var lastHeadNum = 0;
function headURL(headCount)
{
url = "/public/images/heads/mtoy";
if( headCount < 10 )
url += "0";
url += headCount.toString();
url += ".gif";
return url;
}
function headshotImage()
{
lastHeadNum = Math.floor((Math.random()*87)+1);
document.write('<img id="headshot" src="' + headURL(lastHeadNum) + '" onclick="next_headshot();" width=150 height=150>\n');
lastTimeout = setTimeout("next_headshot();", 12000);
}
function next_headshot()
{
if (lastTimeout != 0)
clearTimeout(lastTimeout);
do {
headNum = Math.floor((Math.random()*87)+1);
} while (headNum == lastHeadNum);
lastHeadNum = headNum;
document.getElementById('headshot').src = headURL(headNum);;
lastTimeout = setTimeout("next_headshot();", 12000);
}
then later in the body-html
<div id="contents">
<script type="text/javascript">headshotImage();</script>
<H1 class="contenthead">Table of Contents</H1>
in a previous incarnation, the body-html looked like:
<div id="contents">
<img id="headshot" src="" onclick="next_headshot();">
<H1 class="contenthead">Table of Contents</H1>
and then i had a body.onload handler to call next_headshot the first time, and that had the same problem with Facebook.
If you really want Facebook to have a random image, then I think you need server-side code. But if you're happy with a fixed image, then look into OpenGraph. You should be able to put this in your <head> section:
<meta property="og:image" content="/public/images/heads/mtoy01.gif"/>
Another approach is to put the <img> tag right into the HTML (instead of generating it procedurally) and hard-code it to one image. It won't give you the initially-random image, though you could probably swap it out immediately on page load.