var popup;
jQuery(document).ready(function(){
jQuery(window).bind('load',windowLoadComplete);
});
function windowLoadComplete() {
var settings = new Object();
popup = new SSKpopup(settings);
popup.createPopup();
jQuery('a').each(function(n){
if(jQuery(this).attr('href').indexOf("popup#")>-1) {
jQuery(jQuery(this).attr('href').split("popup#")[1]).hide();
jQuery(this).click(function(e) {
e.preventDefault();
popup.loadContent(jQuery(jQuery(this).attr('href').split("popup#")[1]));
});
}
});
}
I have that piece of code that is to create a popup containing pictures, information just like like http://jqueryui.com/demos/tabs/ and in my html code I create the popup as follows,
<a class="popup" href="/main/popup##hulk">Key Speakers</a>
<br>
Chairman
</p>
<div id="hulk" style="width: 450px; display: none;">
<img class="popup_img" border="0" alt="" src="/main/images/speaker.jpg">
<p>Content descriping the speakers</p
</div>
When I use firebug over the href I see the address different from normal location and if I insert into its as index.php/main/popup#$hulk to be same as every other links and click it then, the page direct me to localhost/xampp/. Of course no popup was displayed.
Related
I'm trying to get 10 elements to appear when the user clicks one of five links.
I will only show two here to save time.
These 'appearing' elements need to be links in some way or another.
HTML - LINKS
<a class="toggler1" href="#!"
><h1 class="website-titles">A boring website</h1></a
<a class="toggler2" href="#!"
><h1 class="website-titles">Unoriginal.co.uk</h1></a
HTML - Appearing elements
<a class="mydiv1" href="main.html">
<div class="pop-up-1">
<img
class="mydiv1-bg"
src="images/pink-pop-up.png"
alt="pink pop up"
/>
<img
class="mydiv1-gif"
src="images/spinning-star.gif"
alt="animated star gif"
/>
</div>
</a>
<a class="mydiv2" href="main.html">
<div class="pop-up-2">
<img
class="mydiv2-bg"
src="images/black-pop-up.png"
alt="black pop up"
/>
<img
class="mydiv2-gif"
src="images/stars.gif"
alt="animated star background"
/>
<h1 class="mydiv2-text">
CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
</h1>
</div>
JS -
This is my JS for one link, copy and pasted 2 times for convenience sake (in the real code it's 5 times for 5 links), with the elementToClick set to different classes (toggler1,toggler2... etc) within each tag. If I copy and paste this again, with another elementToShow (mydiv2 for example), this doesn't work - only one of the elements will appear
<script>
var elementToClick = document.querySelector(".toggler1");
var elementToShow = document.querySelector(".mydiv1");
if (elementToClick) {
elementToClick.addEventListener("click", showElement);
}
function showElement() {
elementToShow.classList.add("show");
}
</script>
<script>
var elementToClick = document.querySelector(".toggler2");
var elementToShow = document.querySelector(".mydiv1");
if (elementToClick) {
elementToClick.addEventListener("click", showElement);
}
function showElement() {
elementToShow.classList.add("show");
}
</script>
CSS
/* POP UP 1 */
.mydiv1 {
display: none;
}
.mydiv1.show {
display: block;
}
/* POP UP 2 */
.mydiv2 {
display: none;
}
.mydiv2.show {
display: block;
}
Thank you for looking at this mess, I am very new to Javascript and I'm sure I'm making this unnecessarily complicated for myself. If anyone can tell me how to get this working it would be greatly appreciated! Thanks!
In your Javascript code, in the showElement, use elementToShow.classList.toggle("show"); instead of elementToShow.classList.add("show");.
var elementToClick = document.querySelector(".toggler1");
var elementToShow = document.querySelector(".mydiv1");
if (elementToClick) {
elementToClick.addEventListener("click", showElement);
}
function showElement() {
elementToShow.classList.toggle("show");
}
var elementToClick = document.querySelector(".toggler2");
var elementToShow = document.querySelector(".mydiv1");
if (elementToClick) {
elementToClick.addEventListener("click", showElement);
}
function showElement() {
elementToShow.classList.toggle("show");
}
/* POP UP 1 */
.mydiv1 {
display: none;
}
.mydiv1.show {
display: block;
}
/* POP UP 2 */
.mydiv2 {
display: none;
}
.mydiv2.show {
display: block;
}
<a class="toggler1" href="#!"
><h1 class="website-titles">A boring website</h1>
</a>
<a class="toggler2" href="#!">
<h1 class="website-titles">Unoriginal.co.uk</h1>
</a>
<a class="mydiv1" href="main.html">
<div class="pop-up-1">
<img
class="mydiv1-bg"
src="images/pink-pop-up.png"
alt="pink pop up"
/>
<img
class="mydiv1-gif"
src="images/spinning-star.gif"
alt="animated star gif"
/>
</div>
</a>
<a class="mydiv2" href="main.html">
<div class="pop-up-2">
<img
class="mydiv2-bg"
src="images/black-pop-up.png"
alt="black pop up"
/>
<img
class="mydiv2-gif"
src="images/stars.gif"
alt="animated star background"
/>
<h1 class="mydiv2-text">
CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
</h1>
</div>
</a>
Wrap all the elements you want to show in a div tag. For example:
<div id="elementToShow">
<a class="mydiv1" href="main.html">
.....
</div>
In your js select that enclosing element
var elementToShow = document.querySelector("#elementToShow");
The problem is in JavaScript part. You have multiple script tags, each of which have elementToClick and elementToShow. When you define elementToClick in the second (or any other) script tag, the previous ones are being overwritten. You only have one elementToClick and one elementToShow, instead of five. The same is true for all the other variables and functions (showElement).
Another piece of advice, try to use reusable code and try to never copy and paste code, like you did here. You can define one function:
function showElement(elementToShow) {
elementToShow.classList.toggle("show");
}
Then you can call this function for each of five elements:
let elements = [
{toggler: 'toggler1', div: 'div1'},
{toggler: 'toggler2', div: 'div2'},
...
];
for (let el of elements) {
let toggler = document.querySelector(`.${el.toggler}`);
let div = document.querySelector(`.${el.div}`);
toggler.addEventListener('click', () => showElement(div)); // add a click listener with a corresponding div
}
Hope this helps!
story: hide the iframe if the .php is deleted or similar. So i try to hide the div that contains the iframe. Website of customer A can iframe a video from my website (external-website). But if the video is deleted, it should hide the complete iframe (the div). The complete php will be deleted or renamed if the video is not available.
Hide the <div> if external file (i want to iframe)
is not available or named as .php?=123456 or has not a <div "id", whatever.
The inline style never changes.
I tried each of this above, i don`t get it working.
I can edit the external .php file (my website too).
I do not get the script to change the inline style whatever i try.
What i want to do, hide the div if "something".
<div id="hide-me">
<iframe src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
function yourFunctionName () {
var anyname = document.getElementById("hide-me").style.display;
if(document.getElementById("id-in-external-php").src == 'https://www.external-website.com/subfolder/1250.php'){
document.getElementById("hide-me").style.display="block";
} else {
document.getElementById("hide-me").style.display="none";
}
}
</script>
I asked a similar question here, but it did not give a solution
enter link description here
content of https://www.external-website.com/subfolder/1250.php :
<div id="id-in-external-php">this is content for the iframe</div>
This is how I ran your code again and it worked, so you can try it:
<div id="hide-me" style="display: none;">
<iframe style="display: none;" id="id-in-external-php" src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
const yourFunctionName = () => {
const anyname = document.getElementById("hide-me");
const frameId = document.getElementById("id-in-external-php");
const check = frameId.contentDocument.body.children
const c = check[0].innerText;
if(c.startsWith('Cannot')) {
anyname.style.display="none";
frameId.style.display="none";
} else {
anyname.style.display="block";
frameId.style.display="block";
}
}
window.addEventListener("load", yourFunctionName, false);
</script>
I did not see where you invoked the function, so i invoked mine when window load
I need make a simple JS popup to view specific content of each link (team stats). For that I've got basic HTML set up which should popup mentioned content.
<!-- Start Team-Players -->
<div class="team-players">
<div class="player-profile">
<img data-js="open" src="img/team-ico/team-srsne.jpg" alt="" class="thumbnail">
<span class="number">#1</span>
<span class="name">HK Sršňe Košice</span>
</div>
<div class="player-profile">
<img data-js="open" src="img/team-ico/team-kvp.jpg" alt="" class="thumbnail">
<span class="number">#2</span>
<span class="name">HK KVP Represent</span>
</div>
<div class="player-profile">
<img data-js="open" src="img/team-ico/team-warriors.jpg" alt="" class="thumbnail" >
<span class="number">#3</span>
<span class="name">HK Spartan Warriors</span>
</div>
etc...
at the end there is popup opening code:
<div class="container">
<button data-js="open">Open popup</button>
<div class="popup">
<h2>$team_name (team name, which was selected for links above should be displayed)</h2>
<button name="close">Close popup</button>
JavaScript code:
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show().this;
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
Could someone help me and advise how can I sort those links to open popup window related to each link? Maybe sort it with some ID or so?
Appreciate
I have 2 solutions:
in html create hidden popups for all teams with id="popup-team-1", and in your link add additional attribute <a data-id="1".. , in javascript do something like this:
var id = $(this).attr("data-id");
$("#popup-team-"+id).show();
load content of popup from server
$.get(url).done(function (content) {
$(".popup").html(content).show();
})
I'm using a Seadragon Viewer for an image gallery. I want to get the first image opened when the page is ready.
The code:
<div class="all-facs">
<a onclick="switchTo(event, '55/dzc_output_images/55_A_1.xml');"
href="#">
<img src="55/dzc_output_images/55_A_1_files/7/0_0.jpg"/>
</a>
<a onclick="switchTo(event, '55/dzc_output_images/55_A_2.xml');"
href="#">
<img src="55/dzc_output_images/55_A_2_files/7/0_0.jpg"/>
</a>
<div id="containerSeadragon">
<script type="text/javascript">
var viewer = null;
function init() {
viewer = new Seadragon.Viewer("containerSeadragon");
viewer.openDzi(dzi);
}
function switchTo(event, dzi) {
if (dzi) {
viewer.openDzi(dzi);
} else {
viewer.close();
}
// don't let the browser handle the link
Seadragon.Utils.cancelEvent(event);
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
</div>
Now I just pass dzi to viewer.openDzi(dzi) and I need first to click on an image to get it shown. How can I pass the dzi of first a?
Thanks for help!
Update:
I'm using jquery-1.7.1.
I believe with jQuery you can trigger a click on that first link right at start-up, like so:
$('.all-facs a').eq(0).trigger('click');
Perhaps a more robust solution would be to attach the DZI info as a data attribute to the a tags, like so:
<div class="all-facs">
<a data-dzi="55/dzc_output_images/55_A_1.xml" href="#">
<img src="55/dzc_output_images/55_A_1_files/7/0_0.jpg"/>
</a>
<a data-dzi="55/dzc_output_images/55_A_2.xml" href="#">
<img src="55/dzc_output_images/55_A_2_files/7/0_0.jpg"/>
</a>
<div id="containerSeadragon">
<script type="text/javascript">
var viewer = null;
function init() {
viewer = new Seadragon.Viewer("containerSeadragon");
switchTo($('.all-facs a').eq(0).data('dzi'));
$('.all-facs a').click(function(event) {
switchTo($(event.target).data('dzi'));
});
}
function switchTo(dzi) {
if (dzi) {
viewer.openDzi(dzi);
} else {
viewer.close();
}
// don't let the browser handle the link
Seadragon.Utils.cancelEvent(event);
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
</div>
By the way, unrelated to the above, you might like to know that there's a new version of Seadragon:
http://openseadragon.github.io/
I have created an HTML file which uses java script to display images randomly displayed in 3 div tags. On click the images move left or right. It works fine until I use single slideshow in the page, but creates problem when I try multiple slideshows on the same page.
Here is the code for one slide show :
**<script>
currentIndx = 2;
MyImages=new Array();
MyImages[0]='1images2.jpeg';
MyImages[1]='1images3.jpeg';
MyImages[2]='1images4.jpeg';
MyImages[3]='artwork.jpg';
MyImages[4]='1images5.jpeg';
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}
/* we create the functions to go forward and go back */
function Nexter()
{
if (currentIndx<MyImages.length-1){
alert(currentIndx);
document.leftimg.src=document.middleimg.src
document.middleimg.src=document.rightimg.src
document.rightimg.src=imagesPreloaded[++currentIndx].src
}
else {
alert("In nexter else")
currentIndx=0
document.leftimg.src = document.middleimg.src
document.middleimg.src = document.rightimg.src
document.rightimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
function Backer()
{
if (currentIndx>0)
{
--currentIndx;
alert("In Backer If");
document.rightimg.src=document.middleimg.src
document.middleimg.src=document.leftimg.src
document.leftimg.src=imagesPreloaded[currentIndx].src
}
else
{
currentIndx = MyImages.length-1
alert(MyImages.length +"else");
document.rightimg.src = document.middleimg.src
document.middleimg.src = document.leftimg.src
document.leftimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.form1.text1.value=Messages[0];
writeImageNumber();
}
</script>
<body onload="setCurrentIndex();automaticly()">
<!-- start of form for image slide show ####################### -->
<div id ="left" style="float:left">
<a href="#" onclick="Backer()" ><img src="1images2.jpeg" width="265" height="262"
border="0" name="leftimg"></a>
</div>
<div id ="middle" style="float:left">
<a href="#" onclick=""><img src="1images3.jpeg" width="265" height="262"
border="0" name="middleimg"></a>
</div>
<div id ="right" class="compimg" style="float:left">
<a href="#" onclick="Nexter()" ><img src="1images4.jpeg"
width="265" height="262" alt="" border="0"name="rightimg"></a>
</div>
<!-- end of form for image slide show ####################### -->**
Any suggestions...
You haven't wrapped your script in any javascript class(object) so all variables you are using have global scope(page level). I guess your variables are over written if you try to use it multiple time.
You can get better answer if you post HTML markup of how you are trying to create multiple slideshow in single page...