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
Related
When i click on an image, the popup does not seem to work, and there are no error messages as well. I searched google for examples but it doesnt work.
Here is my javascript code:
function eventHandlers(){
$(".img-thumbnail").click(togglePopup);}
function togglePopup(e){
var popup = document.getElementById("id_popup");
if (popup === null)
{
popup = document.createElement("span");
popup.id = id_popup;
popup.setAttribute("class","image-popup");
var thumbnail = e.target;
var small_image = thumbnail.src;
var large_image = small_image.replace("_small","_large");
popup.innerHTML = '<img src=' + large_image + '>';
thumbnail.insertAdjacentElement("afterend",popup);
} else
{
$('#' + id_popup).remove();
}}
Code in the main file:
<figure>
<img src="images/test.jpg" class="img-thumbnail" alt="Test" title="View larger image..."/>
<span id="id_popup"
<span id="id_popup" class="image-popup"></span>
<figcaption>Standard Test</figcaption>
</figure>
And my css code:
.image-popup {
border: 5px solid lightgrey;
margin-left: 25%;
margin-top: -60%;
height: 40vh;}
Additionally is there a way that i can modify my javascript file to allow the popup to close when clicked anywhere on the screen?
Help will be really appreciated. Thanks.
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.
No jquery. Pure javascript. I am using a Sharepoint html content editor. I have marked the sources to the images and urls as confidential. I am trying to get it so that when the user clicks on one of the images it triggers the function 'open(this)' and will create a popup window (modal) to a specific url. So far when the user clicks one of the two images it pops up the window but always to the confidential2 url. So when it should match the first case in the if statement of 'open(this)' it is not going to that url. And yes I have checked to make sure I have different urls. I switched the urls around too and it ALWAYS goes to confidential2!! Please help if you can.
<script type="text/javascript">
function opac(x) {
x.style.opacity=.5;
}
function opac_back(x) {
x.style.opacity=1;
}
</script>
<script type="text/javascript">
var options = {
url: theurl,
title: "Learning_Technology",
allowMaximize: true,
showClose: true,
width: 625,
height: 525,
dialogReturnValueCallback: silentCallback};
function open(x) {
var theurl;
if (x.id == "1") {
theurl = "confidential1";
} else if (x.id == "2") {
theurl = "confidential2";
} else {
}
SP.UI.ModalDialog.showModalDialog(options);
}
function silentCallback(dialogResult, returnValue) {
}
function refreshCallback(dialogResult, returnValue) {
SP.UI.Notify.addNotification('Operation Successful!');
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
} </script>
<div style="background-color: rgb(237, 237, 237); width: auto; height: auto;">
<center><h2 style="color: green;">MyLearning Requests</h2></center>
<div style="height: auto; width: auto;">
<center><img width="164" height="42" border="0" id="1" name="button22694Img" src="confidential" onmouseout="opac_back(this)" onmouseover="opac(this)" alt="" style="opacity: 1;"/>
<img width="164" height="42" border="0" id="2" name="button27129Img" src="confidential" onmouseout="opac_back(this)" onmouseover="opac(this)" alt="" style="cursor: pointer; opacity: 1;"/>
</center>
</div>
</div>
You're calling open(this) on the link tag therefor this will be the link and not the image. As the link has no id attribute you're comparing undefined with "1" and "2" which will fail both. You will have to do some little DOM traversal to get the image in the link :)
function open(x) {
var theurl,
img = x.firstChild;
if (img.id == "1") {
theurl = "confidential1";
} else if (x.img == "2") {
theurl = "confidential2";
} else {
}
SP.UI.ModalDialog.showModalDialog(options);
}
You don't have any id attributes on the a tag
You are updating the var theurl but not updating options.url
I am trying to find a way to switch an image on click.
I have two images.
I have one page, on this page I have one of the images displayed.
If I click on the image, I would like the other image to be loaded in its place.
I know a bit about html and css, and a bit less about php. I am assuming the correct way to go about this would be the use of javascript. Unfortunately, I know nothing about this.
Here is my code so far, what I want to do, is have .../page-2.jpg loaded when this image is clicked.
$pageContent = '
<h2>Promotions</h2>
<div class="promo-img">
<img src="'.$docPath.'/page-1.jpg" alt="Page 1" name="Page 1" width="100%" height="150%" id="page1" style="background: #FFF; display:block;" />
</div>
';
Any input here would be greatly appreciated, Thanks!
#Dennis
Where am I going wrong with this?
$pageContent = '
<h2>Promotions</h2>
<div class="promo-img"><img id="promoImage" src="'.$docPath.'/page-1.jpg" alt="Page 1" width="100%" height="150%" style="background: #FFF; display:block;"
onClick="document.getElementById(\'promoImage\').onclick = function() {
if(this.src == \''.$docPath.'/page-1.jpg\'){
this.src = \''.$docPath.'/page-2.jpg\';
} else {
this.src = \''.$docPath.'/page-1.jpg\';
}
};" /></div>
';
Okay, This does not seem to have an onclick effect?
$pageContent = '
<h2>Promotions</h2>
<div class="promo-img"><img id="promoImage" src="'.$docPath.'/page-1.jpg" alt="Page 1" width="100%" height="150%" style="background: #FFF;" /></div>
<script type="text/javascript">
document.getElementById(\'promoImage\').onclick = function() {
if(this.src == \''.$docPath.'/page-1.jpg\'){
this.src = \''.$docPath.'/page-2.jpg\';
} else {
this.src = \''.$docPath.'/page-1.jpg\';
}
};
</script>
';
HTML:
<img id="image" src="first.jpg">
Javascript: (click to switch)
document.getElementById("image").onclick = function() {
if(this.src == "first.jpg"){
this.src = "second.jpg";
} else {
this.src = "first.jpg";
}
};
Javascript: (hover to switch)
document.getElementById("image").onmouseover = function() {
this.src = "second.jpg";
};
document.getElementById("image").onmouseout = function() {
this.src = "first.jpg";
};
These are the simplest techniques. There are "better" solutions using jQuery or CSS that separate code from the HTML.
This code works when loaded in Firefox, but does not work in IE8. In IE8, clicking the link has no effect.
I would appreciate any pointers on how to make it work in IE.
<html>
<head>
<title>RG</title>
</head>
<script type="text/javascript">
var rightTarget;
var leftTarget;
var index = 516;
var img;
function rightLinkClicked(e) {
rightTarget = e.target;
rightTarget.style.color = "green";
if (index < 547) {
index = index +1;
img=document.getElementById("img");
img.src="pics/IMG_0" + index + ".JPG";
} else {
alert ("This is the last painting");
}
}
function leftLinkClicked(e) {
leftTarget = e.target;
leftTarget.style.color = "red";
rightTarget.style.color = "black";
if (index >516) {
index = index -1;
img=document.getElementById('img');
img.src="pics/IMG_0" + index + ".JPG";
} else {
alert ("This is the first painting");
}
}
function addListeners() {
var rightLink = document.getElementById("rightlinkid");
rightLink.addEventListener('click', rightLinkClicked, false);
var leftLink = document.getElementById("leftlinkid");
leftLink.addEventListener('click', leftLinkClicked, false);
}
window.addEventListener('load', addListeners, false);
</script>
</head>
<body>
<h2>RG</h2>
<div>
<a id="leftlinkid">Previous
<img src="icons/left.gif" ;="" alt="left arrow" title="">
</a>
</div>
<div id="myimg">
<img id="img" src="pics/IMG_0516.JPG" ;="" alt="start arrow" title=""width="640"height="480">
</div>
<div>
<a id="rightlinkid">Next
<img src="icons/right.gif" ;="" alt="right arrow" title="">
</a>
</div>
<p>© 2011 RG</p>
</body>
</html>
IE uses attachEvent instead of addEventListener.
You may want to use a cross-browser Javascript library such as jQuery to handle these issues (and many more) for you.