i have a website which have random images each time the home page is loaded. But the problem of the random images is it still loaded when i click back to home page BUTTON again. Precisely i want the random images will display ONLY when i refresh the home page not the home page button,how would i do it?
Here is the following code:
JAVASCRIPT<Head>
<script type="text/javascript">
var y1 = 20;
(document.getElementById) ? dom = true : dom = false;
var gallery = new Array();
gallery[0] = new Array("earlywork001.jpg","earlywork002.jpg","earlywork003.jpg","earlywork004.jpg","earlywor k005.jpg");
function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write('<img src="images/earlywork/' + gallery[whichGallery][idx] + '" width="402" height="180">');
}
function hideIt() {
if (dom) {document.getElementById("popup").style.visibility='hidden';}
}
function showIt() {
if (dom) {document.getElementById("popup").style.visibility='visible';}
}
function placeIt() {
if (dom && !document.all) {document.getElementById("popup").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1)) + "px";}
if (document.all) {document.all["layer1"].style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - (document.documentElement.clientHeight-y1)) + "px";}
window.setTimeout("placeIt()", 10); }
</script>
</head>
HTML<Body>
<body onLoad="placeIt(); showIt()">
/*code*/
<div id="content"><!--Start content-->
<div id="popup" style="position:absolute; left:140px; width:410px; height:20px; visibility:hidden">
<div style="background-color:white; padding:3px; border:1px solid black">
<span style="float:right; background-color:gray; color:white; font-weight:bold; width='20px'; text-align:center; cursor:pointer" onclick="javascript:hideIt()"> X </span>
<script language="javascript">pickImageFrom(0);</script></div>
</div>
<img src="images/home.png" width="644" height="363" alt="home" class="content" />
</div><!--End content-->
</div><!--End body content-->
/*code*/
I ran into some trouble searching for a similar solution sometime ago so I wrote this and I'm pasting it here in case somebody else comes to search this again.
window.onload = choosePic;
var images = new Array("https://randomuser.me/api/portraits/men/2.jpg", "https://randomuser.me/api/portraits/women/2.jpg", "https://randomuser.me/api/portraits/men/52.jpg", "https://randomuser.me/api/portraits/women/12.jpg", "https://randomuser.me/api/portraits/women/7.jpg", "https://randomuser.me/api/portraits/men/27.jpg", "https://randomuser.me/api/portraits/women/13.jpg", "https://randomuser.me/api/portraits/women/4.jpg", "https://randomuser.me/api/portraits/men/52.jpg", "https://randomuser.me/api/portraits/men/6.jpg", "https://randomuser.me/api/portraits/men/23.jpg", "https://randomuser.me/api/portraits/women/41.jpg", "https://randomuser.me/api/portraits/women/28.jpg");
function choosePic(){
var randomNum = Math.floor(Math.random() * images.length);
document.getElementById("random-image").src = images[randomNum];
}
<img src="" alt="me" id="random-image">
Wrap your code in an if:
if (document.URL == document.referrer) {
// your code here
}
The document.referrer will get you the url of the previous page. Match it to the current url in document.URL. If both do not match, then your page was navigated to from another page.
Related
I have just been told to create a link that opens three tabs and I cant figure it out. The JavaScript I created opens two tabs only. Here is the code:
<div id="g_image2" style="position:absolute; overflow:hidden; left:760px; top:32px; width:149px; height:45px; z-index:49">
<a href="javascript:{}" onClick="window.open('http://cent5.serverhostingcenter.com:2199/start/behyghgu/','radio_player', 'Width=82,Height=50,directories=0,hotkeys=0,location=0,menubar=0,personalbar=0,resizable=0,scrollbars=0,status=0,toolbar=0');">
onClick="window.open('http://cent5.serverhostingcenter.com:2199/start/behyghgu/','radio_player', 'Width=82,Height=50,directories=0,hotkeys=0,location=0,menubar=0,personalbar=0,resizable=0,scrollbars=0,status=0,toolbar=0');">
<img src="images/Fm101 banner.png" alt="" title="" border=0 width=145 height=43></a>
</div>
Use a function
window.onload=function() {
document.getElementById("playerlink").onclick=function(e) {
e = e?e:window.event;
e.preventDefault();
var w,
vid = this.getAttribute("data-vid").split(","),
preFix = "http://cent5.serverhostingcenter.com:2199/start/";
for (var i=0;i<vid.length;i++) {
w = window.open(preFix+vid[i],"player_"+i,"width=82,height=50,resizable=0");
}
if (w == null) {
alert("Please allow popups");
}
}
}
Click
I have a simple script which works as a simple html gallery. However, I need to add some transition effects to my gallery, something like fade in, fade out, or the effect of something similar to the subtitles at the end of every movie (you know what I mean).
How can I solve this? I would like to make it using only JS, HTML, CSS, without external plugins. Is it possible? For now on, I have only something like this below:
<head>
<title>Test</title>
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
i+=3;
},5000);
</script>
</head>
<body>
<div align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </br>
</div>
</body>
I just created a JQuery function and added it to your script. Now when you click on that button it will do as it says. It is just as an example how to do that
<html>
<head>
<title>Test</title>
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
i+=3;
},5000);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".btn1").click(function(){
$("#link1").fadeOut()
});
$(".btn2").click(function(){
$("#link1").fadeIn();
});
});
</script>
</head>
<body>
</script>
</head>
<body>
<div align="center">
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </br>
</div>
</body>
</html>
You can definitely achieve some effects with CSS. But not all (like jQuery-ui's blind)
most effects consist of changing:
opacity: [0-1]
display: relative; left: [X]px; top: [Y]px or transform: translate([X]px,[Y]px)
overflow: hidden
and an animation:
either CSS:
#img {
animation: fade-in 2s infinite;
}
#keyframe fade-in {
from {
left: -200px
}
to {
left: 0
}
}`
or JavaScript:
var img = document.getElementById('img');
for(i = 1; i <= 100; i++){
(function(step) {
setTimeout(function() {
img.style.transform = "translate(-"+(200-step*2)+"px, 0)";
}, step * 20);
})(i);
}
to achieve something like blind, you must move an image-container <div> left, while moving the image right at the same speed.
Here's a simplified blind effect example
https://jsfiddle.net/warkentien2/Lh10phuv/5/
Here I've implemented 8 pure JavaScript effects (including blind, with instructions)
- fade in
http://codepen.io/warkentien2/pen/pboVXR
- fade out
http://codepen.io/warkentien2/pen/EyxpVq
You can try this one. I have not changed your code at all.
HTML
<div align="center">
<a href="http://www.example1.com" id="link1">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' >
</a>
</br>
</br>
<a href="http://www.example2.com" id="link2">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' >
</a>
<br>
<br>
<a href="http://www.example3.com" id="link3">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3'>
</a>
<br>
</div>
Css
<style>
.animate{transition:all 1s ease; opacity:0;}
</style>
Js
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
document.getElementById('link1').style.opacity = 0;
setTimeout(function(){
document.getElementById('link1').setAttribute("class", "animate");
document.getElementsByClassName('animate')[0].style.opacity = 1;
setTimeout(function(){document.getElementById('link1').removeAttribute("class", "animate")},500)
},500)
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
document.getElementById('link2').style.opacity = 0;
setTimeout(function(){
document.getElementById('link2').setAttribute("class", "animate");
document.getElementsByClassName('animate')[1].style.opacity = 1;
setTimeout(function(){document.getElementById('link2').removeAttribute("class", "animate")},500)
},500)
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
document.getElementById('link3').style.opacity = 0;
setTimeout(function(){
document.getElementById('link3').setAttribute("class", "animate");
document.getElementsByClassName('animate')[2].style.opacity = 1;
setTimeout(function(){document.getElementById('link3').removeAttribute("class", "animate")},500)
},500)
i+=3;
},5000);
</script>
Check live example here - https://jsfiddle.net/Rit_Design/9mkvffnk/1/
Remember the code can be much more smarter.
I've been trying for the past hours to create a Comic Book online reader to allow my images to load up.
Everything works fine but I use a counter using a increment method basically and it just doesn't work because bringing down the increments breaks the function.
Maybe there is a simpler way? Also jQuery is the most obscure language to learn unlike HTML or PHP, jQuery has a documentation that pretty much has no organization. Its like here's all the stuff now read each one and maybe you'll find yours. My code is below
<script>
$(function manga () {
var count = 0;
var images = ["source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg", "source_images/07.jpg"];
$("#left").click(function () {
var img = images[count % images.length];
++count;
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
$("#right").click(function () {
var img = images[count % images.length];
--count;
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
manga();
});
</script>
<title></title>
<center>
<img id="left" style="width:10%; float:left; padding:1.3%" src="files/left_arrow.png" />
<div >
<img id="manga" style="width:75%; float:left" src="source_images/00.jpg" />
</div>
<img id="right" style="width:10%; float:left; padding:1.2%" src="files/right_arrow.png" />
</center>
Basically your calling your function manga 3 times
first when it loads
second when your do left click
and third when you do right click
In this your initializing counter to keep track of the images and everytime
your calling function again your initializing it to 0
so your count again starting from 0.
So to avoid it make your count variable global declare it outside the manga() function.
checkout this code
<script>
var count = 0;
$(function manga () {
var images = ["source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg", "source_images/07.jpg"];
$("#left").click(function () {
++count;
var img = images[count % images.length];
alert(img);
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
$("#right").click(function () {
if(count == 0)
{
count = images.length-1;
}
else {
--count;
}
var img = images[count % images.length];
alert(img);
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
manga();
});
</head>
<body>
<center>
<center>
<img id="left" style="width:10%; float:left; padding:1.3%" src="files/left_arrow.png" />
<div >
<img id="manga" style="width:75%; float:left" src="source_images/00.jpg" />
</div>
<img id="right" style="width:10%; float:left; padding:1.2%" src="files/right_arrow.png" />
</center>
</center>
I changed the position of count variable in both left and right click. And added one if condition in left click so that when the page loads first time and if user click left arrow first it will show last image.
so image src will move from first to last.It will work.
im trying to make nav bar with sub menus but i keeping getting dropMenu is not defined and when i hover over the two paris links i get Uncaught TypeError: Cannot read property 'style' of null any idea what is causing this
here is my code
html
<html>
<link type="text/css" rel="stylesheet" href="vacation.css"/>
<head>
<title>Paris</title>
</head>
<body>
<div id="menus">
<div id ="parismenu">
Paris
<div id="dropmenu1" class="dropmenus">
apple
</div>
</div>
<div id ="disneymenu">
Paris
<div id="dropmenu2" class="dropmenus">
apple
</div>
</div>
</div>
</body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="vacation.js"></script>
</html>
css
div#menus{
margin-left:16px;
}
div#menus> div{
float:left;
margin:0px 20px;
}
div.dropmenus{
display:none;
position:absolute;
top:100px;
width:120px;
background:teal;
z-index:2;
padding:4px;
border: blue 3px solid;
border-top:none;
border-radius:5px 5px 5px 5px;
}
div.dropmenus>a{
display:block;
margin:4px;
padding:7px;
font-size:14px;
text-decoration:none;
background:blue;
border-radius:3px;
color:red;
}
div#dropmenu1{
left:24px;
}
div#dropmenu2{
left:116px;
}
javascript
var fade=function(){
return{
init:function(id,flag,target){
this.elem=document.ElementById(id);
clearInterval(this.elem.si);
this.target=target ? target : flag ? 100 : 0;
this.flag = flag||1;
this.alpha = this.elem.stle.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.elem.si=setIntterval(function(){fade.fadep()},20);
},
fadep:function(){
if(this.alpha==this.target){
clearInterval(this.elem.si);
}
else{
var value=Math.round(this.alpha + ((this.target - this.alpha) * .05)) +(-1 * this.flag);
this.elem.style.opacity=value/100;
this.elem.style.filter='alpha(opacity=' + value + ')';
this.alpha=value
}}}}();
var menu= ["dropmenu1","dropmenu2","dropmenu3"];
function dropMenu(x){
for(var m in menu){
if(menu[m] != x){
document.getElementById(menu[m]).style.display="none";
}}
if(document.getElementById(x).style.diplay=="block"){
fade.init(x,1);
}
else{
fade.init(x,0)}}
Your array contains three ids and your html only has the first two - so
document.getElementById(menu[m])
will be undefined if m === 2
So you need to remove "dropmenu3" from the menu array.
Also, this line:
this.elem=document.ElementById(id);
should probably be
this.elem=document.getElementById(id);
If you want to do this without jquery heres the code you will need. There were several typos in your original javascript. I also changed if so that all elements not being hovered were instantly hidden.
HTML
<div id="menus">
<div id="parismenu">
Paris
<div id="dropmenu1" class="dropmenus">
apple
</div>
</div>
<div id="disneymenu">
Paris
<div id="dropmenu2" class="dropmenus">
apple
</div>
</div>
</div>
JAVASCRIPT
var menu = ["dropmenu1", "dropmenu2"];
function dropMenu(x) {
for (var m in menu) {
if(menu[m] != x){
document.getElementById(menu[m]).style.opacity = 0;
document.getElementById(menu[m]).style.filter = 'alpha(opacity=0)';
}
}
fade.init(x, 1);
}
var fade=function(){
return{
init:function(id, flag, target){
this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.elem.si = setInterval(function(){fade.tween()}, 20);
},
tween:function(){
if(this.alpha == this.target){
clearInterval(this.elem.si);
}else{
var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
this.elem.style.opacity = value / 100;
this.elem.style.filter = 'alpha(opacity=' + value + ')';
this.alpha = value
}
}
}
}();
I left your CSS unchanged. For a working jsfiddle check this out:
http://jsfiddle.net/XfyKZ/
Why dont you just use the jquery fader? I have cleaned up your javascript and html a little bit. Instead of using the element onMouseover event Im adding a listener to that element for that event after the document is loaded.
<!-- HTML -->
<div id="menus">
<div id="parismenu">
Paris
<div id="dropmenu1" class="dropmenus">
apple
</div>
</div>
<div id="disneymenu">
Disney
<div id="dropmenu2" class="dropmenus">
apple
</div>
</div>
</div>
Then JavaScript:
$(function () {
$('.dropmenu').on('mouseover', function (event) {
$($(this).attr('data-menu-id')).fadeIn();
});
$('.dropmenu').on('mouseout', function (event) {
$($(this).attr('data-menu-id')).fadeOut();
});
});
Then Your CSS is unchanged.
Heres a JSFIDDLE showing a working example.
I'm using Javascript to show documents. First, I hide the content that is loaded. Then, if a user press a button, the text related to that button will become visible while hiding other texts.
Currently, my technique does not change the URL that shows in the address bar.
I would like to update the address bar when a user clicks on one of the content display buttons. For example:
address.com/value_of_button
And if a user enters:
adress.com/a_value
I want to change display of div associated with the value. How is this done?
You can always use a hash url, and set the url like this:
function setHash(var hash) {
window.location.hash = hash;
}
If you want to retrieve the hash in the link to update the page, you can use something like
function getHash() {
return window.location.hash;
}
And to update the page you can just simply use if statements like this:
if(getHash() == "#main") {
document.getElementById('content').innerHtml = "<p>Main content</p>";
}
I had already demonstrated this at some point in the last year with jQuery. It's possible to not use jQuery, of course, but I'll provide you with the demo I created. I'll port an example to regular Javascript as well.
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu a').each(function(){
id = $(this).attr('href');
id = id.substring(id.lastIndexOf('/'));
id = id.substring(0,id.indexOf('.'));
$(this).attr('rel',id);
});
$('#home').show();
$('#menu a').click(function(e){
e.preventDefault();
$('.content').hide();
$('#'+$(this).attr('rel')).show();
location.hash = '#!/'+$(this).attr('rel');
return false;
});
});
</script>
</head>
<body>
<div id="menu">
Home -
One -
Two -
Three
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>
EDIT
DOM method as promised:
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var links = document.getElementById('menu').getElementsByTagName('a'),
divs = document.getElementsByTagName('div'),
sections = [],
id = '';
for (var i = 0, size = divs.length; i < size; i++) {
if (divs[i].className.indexOf('content') != -1) {
sections.push(divs[i]);
}
}
for (var i = 0, size = links.length; i < size; i++) {
id = links[i].href;
id = id.substring(id.lastIndexOf('/') + 1);
id = id.substring(0,id.indexOf('.'));
links[i].rel = id;
links[i].onclick = function(e){
e.preventDefault();
for (var p = 0, sections_size = sections.length; p < sections_size; p++) {
sections[p].style.display = 'none';
}
document.getElementById(this.rel).style.display = 'block';
location.hash = '#!/' + this.rel;
return false;
}
}
document.getElementById('home').style.display = 'block';
};
</script>
</head>
<body>
<div id="menu">
Home -
One -
Two -
Three
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>