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=""></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);
};
});
Related
I have a code show popup on the website, I want this popup only show 1 once/day for user.
I use the code below to show the popup:
For functions theme flatsome:
function img_popup(){;?>
<div class="btn-popup">
<div class="before-img"></div>
<div class="img-popup">
<a href="">
<img src="link-images">
</a>
</div>
</div>
<?php }
add_action('flatsome_footer','img_popup');
For js:
<script>
jQuery(document).ready(function ($) {
function show_popup(){
$(".btn-popup").show();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
$(".btn-popup .before-img").on("click", function(e){
$(".btn-popup").addClass('hide-imt');
});
});
</script>
Please help me, thanks.
if (!localStorage.getItem("lastSet")) {
// your logic here
localStorage.setItem("lastSet", new Date().getTime())
}
I have a page with several JWPlayer instances. I would like to stop, or pause the video that is playing if and when the user clicks on another one. Right now videos play at the same time and it is quite annoying.
I tried the stop and pause methods for JWPlayer but I can't get them to work.
Thank you in advance, here's my code so far (2 videos but there are several others).
<div class="col-lg-4">
<div id="video1"></div>
<script type="text/javascript">
jwplayer().stop();
jwplayer("video1").setup({
file: "video1.mp4",
image: "1.jpg",
width: "100%",
aspectratio: "16:9",
logo: { hide: true },
skin: "bekle"
});
</script>
<p>Description</p>
</div>
<div class="col-lg-4">
<div id="video2"></div>
<script type="text/javascript">
jwplayer("video2").setup({
file: "video2.mp4",
image: "2.jpg",
width: "100%",
aspectratio: "16:9",
logo: { hide: true },
skin: "bekle"
});
</script>
<p>Description</p>
</div>
The stop() in the first video doesn't work and actually deletes the player that doesn't load at all.
I iterate through all the players on the page and then make sure all are paused except for the one I want to play:
<script src="https://content.jwplatform.com/libraries/your_player_here.js"></script>
<div id="videoA"></div><br><br>
<div id="videoB"></div><br><br>
<div id="videoC"></div><br><br>
<div id="videoD"></div><br><br>
<script>
jwplayer('videoA').setup({
file: 'bunny.mp4'
}).on('play',function(){
pauseOthers(this.getContainer().id);
});
jwplayer('videoB').setup({
file: 'tears.mp4'
}).on('play',function(){
pauseOthers(this.getContainer().id);
});
jwplayer('videoC').setup({
file: 'sintel.mp4'
}).on('play',function(){
pauseOthers(this.getContainer().id);
});
jwplayer('videoD').setup({
file: 'http://content.jwplatform.com/manifests/s8BPzDe0.m3u8'
}).on('play',function(){
pauseOthers(this.getContainer().id);
});
function pauseOthers(id) {
console.log('Playback just started for: '+id);
var videos = document.getElementsByTagName('video');
for (i=0;i<videos.length;i++) {
if (id != videos[i].parentNode.parentNode.id) {
jwplayer(videos[i].parentNode.parentNode.id).pause(true);
console.log('Pausing: '+videos[i].parentNode.parentNode.id);
}
}
}
</script>
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 just finished the 5 Sliding page site, which each page i have image slider.
i am using Image slider within Page Slider. when i am trying to use the same image slider with different images for page slide 3, its not working. please help would be great Appreciate.
i am not good in Jquery, so i did lot of research and no luck...
<div id="address">
<img src="images/address.png" width="300" height="119" alt="address">
</div>
<div id="shop">
<img src="images/shop.jpg" width="300" height="225" alt="Shop">
</div>
<div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
<div id="kitchen2">
<script type="text/javascript">
$(function(){
var options = {
firstImageIndex: 0,
borderWeight: 0 },
params = {
sources: [
{
preview: 'images/previews/1.jpg',
original: 'images/originals/1.jpg',},
{
preview: 'images/previews/2.jpg',
original: 'images/originals/2.jpg',},
{
preview: 'images/previews/3.jpg',
original: 'images/originals/3.jpg',},
{
preview: 'images/previews/4.jpg',
original: 'images/originals/4.jpg',}
]
};
$( '.photocradle' ).photocradle( params, options );
}); </script>
</div>
<div id="address">
<img src="images/address.png" width="300" height="119" alt="address">
</div>
<div id="shop">
<img src="images/shop.jpg" width="300" height="225" alt="Shop">
</div>
<div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
<div id="kitchen3">
<script type="text/javascript">
$(function(){
var options = {
firstImageIndex: 0,
borderWeight: 0 },
params = {
sources: [
{
preview: 'images/previews/5.jpg',
original: 'images/originals/5.jpg',},
{
preview: 'images/previews/6.jpg',
original: 'images/originals/6.jpg',},
{
preview: 'images/previews/7.jpg',
original: 'images/originals/7.jpg',},
{
preview: 'images/previews/8.jpg',
original: 'images/originals/8.jpg',}
]
};
$( '.photocradle' ).photocradle( params, options );
}); </script>
</div>
i used the method below, and on first page slider, i am getting 2 image overlap, i need 3 small images in 3 page slider with different size
Link is http://theshoaibahmed.com/jquery.photocradle-0.4.2.js
here is the link for what i am trying to achieve and not working
http://www.theshoaibahmed.com/roman/
if you noticed i used
photocradle.$area = $( '' )
.appendTo( $( "#kitchen2") );
what option i can use so if i have to use 3 more image slider with different size, i would be able to use it.
That is because you have 2 different divs with same name class on the same page, and photocradle is confused to which one should he append the code.
Do like this:
<div id="first" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
-
$( '#first' ).photocradle( params, options );
-
<div id="second" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
-
$( '#second' ).photocradle( params, options );
Here is the link when i tried the technique above
http://www.theshoaibahmed.com/roman/
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.