Develop Reference

JS PopUp windows from different sources

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();
})

Modal popup with cookie.js

So I am trying to implement a modal popup on my homepage that displays on the first page visit only and expires after a set amount of time. I am currently using cookie.js to do so and I have a JSfiddle (here:https://jsfiddle.net/yaLsdahk/68/) that works to perfection. However, when I try to copy the code over to my homepage, it doesn't seem to work. Can anybody offer assistance?
Here's my html markup and script:
<div id="init-modal-wrapper">
<div class="opening-modal-title"> A little heads up... </div>
<div class="close_box_6">
<div class="icon-font-25 alignment" data-icon="&#xe0ab"></div>
</div>
<div id="horizontal_bar" class="alignment"> </div>
<div id="popupfoot" class="alignment">
<div id="typeface" class="init-modal-text">STUFF!</div>
</div>
</div>
<div class="init-modal-overlay"></div>
$(document).ready(function() {
if ($.cookie('init_modal_1') == null) {
$.cookie('init_modal_1', 'yes', { expires: 1, path: '/' });
var delay=4000;
setTimeout(function(){
$("#init-modal-wrapper").stop().animate({
height: "toggle",
opacity: "toggle"
}, "slow");
$('.init-modal-overlay').fadeIn("slow",function(){});
}, delay);
};
});

Get onclick of first child and pass to the function

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/

how to make the div autohide when click other button

hai im working with show/hide slider with div..evrything is working fine with my coding..
but i want my div or my content will auto hide when i click another button(image in my coding)..
i hope that anybody can help me with this..thanks in advance..
this is my html
<div id="slidingDiv">
<a href="#" class="show_hide" rel="#slidingDiv11">
<img src="../img/choose/mens.png">
</a>
<a href="#" class="show_hide" rel="#slidingDiv12">
<img src="../img/choose/womens.png">
</a>
<div id="slidingDiv11">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
<div id="slidingDiv12">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
</div>
<div id="slidingDiv1">
<a href="#" class="show_hide" rel="#slidingDiv16">
<img src="../img/choose/book.png">
<a>
<a href="#" class="show_hide" rel="#slidingDiv17">
<img src="../img/choose/textbooks.png">
</a>
<div id="slidingDiv16">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
</div>
<div id="slidingDiv17">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
</div>
</div>
this is my css
#slidingDiv, #slidingDiv1, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5, #slidingDiv6, #slidingDiv7, #slidingDiv8, #slidingDiv9, #slidingDiv10, #slidingDiv11, #slidingDiv12, #slidingDiv13, #slidingDiv14, #slidingDiv15, #slidingDiv16, #slidingDiv17 {
height:300px;
padding:20px;
margin-top:10px;
border-bottom:5px;
display:none;
}
this is my js
$(document).ready(function () {
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View', // the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
if (options.changeText == 1) {
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);

With jQuery,
$("your_other_button").on('click', function() {
$("your_div_to_hide").hide();
});

Using Jquery
$("other_button").on('click', function() {
$("div_to_hide").toggle();
});

Since you want to hide the div when you click on a button, you should make it the document when clicked to hide. Try something like this.
$(".hide_show").click(function(event) { event.stopPropagation(); $(this).fadeToggle(1000);}); $(document).click(function() { $(".hide_show).fadeOut(1000); });
use event.stopPropagation(); to stop the document event to trigger .hide_show class. May be that will help you.

JQmobi - Dynamically switch pages

I have a piece of my JQMobi code here. Problem is that it doesn't switch pages dynamically:
<div title='Whatever' id="main" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
<div class="swipe_area">
<!-- nothing here, just for swiping to not disturb other elements -->
<- Swipe me ->
</div>
<script>
var init_swipe = function () {
$(".swipe_area").swipeListener({
vthreshold: 30,
hthreshold: 80,
callBack: function (dir) {
if(dir.left) {
window.location.href = "#menulink3";
alert("go to menulink3");
}
else if(dir.right) {
window.location.href = "#menulink2";
alert("go to menulink2");
}
}
});
};
window.addEventListener("load", init_swipe, false);
</script>
</div>
<div title='Whatever' id="menulink2" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
content of menulink2
</div>
<div title='Whatever' id="menulink3" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
content of menulink3
</div>
The url does change in browser and it gives an alert (just to be sure), but there is no switch in pages. Also, normal a href links work just fine. Is there a jqmobi function I have to call to make it refresh or something?
Thanks in advance

You don't change the window.location to navigate. Look at $.ui.loadContentDiv to do it programatically.