We Keep Coding

How to recreate div

I have an html page contain a div called wowslider-container1. I want to recreate the elements inside the wowslider-container1 when the values of properties such as duration and delay change. If I create another slider, it will create multiple sliders. If I hide, both will hide. What can I do? I don't need multiple sliders.
Duration:<input type="number" id="txtDuration" />
Delay<input type="number" id="txtDelay" />
<button onclick="set()">Set </button>
<br/>
<br/>
<div>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor: pointer">
<img id="wows1_0" class="imgMain" src="SBG_HomePg_ANA2019_1146x405V3.jpg" len="0" alt="Consign." />
</a>
</li>
</ul>
</div>
</div>
</div>
script
var delay_value=100;
var duration_value=20;
function set() {
var dur=document.getElementById("txtDuration").value;
var del=document.getElementById("txtDelay").value;
setDuration(del, dur);
}
function setDuration(delay,duration) {
delay_value=delay;
duration_value=duration;
jQuery("#wowslider-container1").wowSlider({
effect: "fade",
prev: "",
next: "",
duration: duration_value * 100,
delay: delay_value * 100,
width: 900, height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: "parallax",
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
});
}
setDuration(20,100);

The API shows that options can only be set during slider initialization (and there's no destroy() event), so you'll have to remove the events / elements and restart the slider:
http://wowslider.com/help/wowslider-api-184.html
HTML:
Duration: <input type="number" id="txtDuration">
Delay: <input type="number" id="txtDelay">
<button onclick="set()">Set </button>
<br><br>
<div class="wow-slider-container">
<div class="wow-slider">
<div class="images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor:pointer">
<img id="wows1_0" class="imgMain" src='SBG_HomePg_ANA2019_1146x405V3.jpg' len='0' alt="Consign.">
</a>
</li>
</ul>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
var wowSliderOptions = {
effect: 'fade',
prev: '',
next: '',
duration: 20,
delay: 100,
width: 900,
height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: 'parallax',
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
}
var wowSliderContent = jQuery('.wow-slider').html();
var wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
function set() {
// Set user-defined options
wowSliderOptions.duration = document.getElementById('txtDuration').value;
wowSliderOptions.delay = document.getElementById('txtDelay').value;
// Remove original WOW Slider instance
wowSlider.remove();
// Recreate original HTML slides
jQuery('.wow-slider-container').html(wowSliderContent);
// Start WOW Slider
wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
}
</script>

Formatting Imagemapster selections

Hello I'm working on this imagemapster show selection code. People will click on map areas to select.
<div id="veg_demo" style="width:800px; margin: auto;">
<div style="clear:both;">
<img id="fvip" width="100%" src="linkto/images/fvip_map.jpg" usemap="#fvip" >
</div>
<div style="clear:both; height:8px;"></div>
<div id="selections" style="clear:both;"></div>
<a id="show_selected" style="clear:both;">Show Selected Beds:</a>
<div id="selected" style="clear:both;"></div>
</div>
<map id="fvip_map" name="fvip">
<area shape="poly" name="915" coords="756,100,756,135,772,135,772,100" href="#" />
<area shape="poly" name="914" coords="739,100,739,135,755,135,755,100" href="#" />
<area shape="poly" name="913" coords="717,101,717,136,733,136,733,101" href="#" />
</map>
$(document).ready(function () {
var image = $('#fvip');
var xref = {
<?php if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo "'$post->ID':\"<h3>Bed number $post->ID</h3>\",";
}
wp_reset_postdata();
} else {
} ?>
};
var defaultDipTooltip = 'some text';
image.mapster(
{
render_highlight: {
fillColor: '2aff00',
stroke: true,
},
render_select: {
fillColor: '1433d3',
stroke: true,
},
fillOpacity: 0.8,
fillColor: "14b842",
strokeColor: "FFFFFF",
strokeOpacity: 0.8,
strokeWidth: 4,
stroke: true,
scaleMap: false,
isSelectable: true,
singleSelect: false,
showToolTip: true,
mapKey: 'name',
listKey: 'name',
onClick: function (e) {
var newToolTip = defaultDipTooltip;
$('#selections').html(xref[e.key]);
if (e.key==='806') {
newToolTip = "FVIP";
}
},
showToolTip: true,
toolTipClose: ["tooltip-click", "area-click", "area-mouseout"],
areas: [ <?php foreach($posts as $post) { echo "{ toolTip: \"This bed is not available for this date.\", key : \"$post->ID\", isSelectable: false },"; } ?> ]
});
function showSelect(){
$("#show_selected").bind("click", function (e) {
e.preventDefault();
$('#selected').text($("#fvip").mapster("get"));
});
}
showSelect();
});
</script>
but I have no idea on how to make the selections as a loop, eg:
<div>913</div>
<div>914</div>
<div>915</div> ... and so on
I would like to style and format each value. Right now the output of the #selected are just 913914915
any help very much appreciated...
thank you

Alternate <div> content at every 10 seconds is not working

Functionality:
I have 2 diff <div> content at the same page, hence, Content A is shown before Content B is shown and the loop will re-iterate again. Therefore, the process is as described below:
Content A (shown for 10seconds)-> Content B (shown for 10seconds) -> Content A (shown for 10 seconds) -> Content B (shown for 10 seconds)
Hence, the display of the content will be shown in an re-iteration for infinite loops.
Content A -> a list of jplayer content
Content B -> a static <div> content
What has been done:
I have set the following:
Created a <div> for Content A:
<div id="M_Start" align= "center" style ="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">
<!--Video Div for Content A-->
<div id="Start_Video" style="position:absolute;"></div>
</div>
Created a <div> for Content B:
<div id="I_Page" align= "center" style ="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
<table cellspacing="0" cellpadding="0" width="1080">
<tr>
<td width="1080" align="center">
<div id="i_page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>
</td>
</tr>
</table>
</div>
Secondly, I have done setTimeInterval for both Content such that after 10 seconds, the contents will switch. My code as shown:
var videoList = ["lib/video/MainBackground.mp4", "lib/video/I.mp4"];
var videoIndex = 0;
setInterval(function() {
$("#M_Video").jPlayer({
ready: function() {
console.log("currentPlaying " + videoList[videoIndex]);
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
ended: function() {
videoIndex++;
console.log("NewCurrent:" + videoIndex);
console.log("current :" + videoList[videoIndex]);
if (videoIndex >= videoList.length) {
console.log("Next" + videoIndex);
videoIndex = 0;
//ContentB to fadeIn
$('#IPage').fadeIn({ duration: slideDuration, queue: false });
}
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 1080,
height: 1920
}
});
$("#M_Video").show();
}, 10000);
<!--Content A -->
<div id="M_Start" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">
<!--Video Div-->
<div id="M_Video" style="position:absolute;"></div>
<button class="MilleniaStart" onclick="Start()"></button>
</div>
<!--Content B-->
<div id="IPage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
<table cellspacing="0" cellpadding="0" width="1080">
<tr>
<td width="1080" align="center">
<div id="i_page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>
</td>
</tr>
</table>
</div>
Issue:
After the contents have been switched after 10secs, the switch of content stops and it does not re-iterate the switching of the content anymore. Meaning: after Content A has switched to Content B, it stops, when the correct behaviour should be Content A switched to Content B and then switches back to Content A before switching to Content B and to Content A, the re-iteration should never stops.
Hence, I do require some help. Please help. I do not know how to proceed or what has gone wrong.
Thank you.

Try this:
/*** javascript/jQuery: ***/
var videoList = ["http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4"];
var videoIndex = 0;
console.log("current: " + videoList[videoIndex]);
$("#M_Video").jPlayer({
ready: function() {
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 500,
height: 400
}
});
setTimeout(swapVideo, 10000);
function swapVideo(){
videoIndex++;
if (videoIndex >= videoList.length) {
//console.log("Next < " + videoIndex);
videoIndex = 0;
}
//console.log("NewCurrent:" + videoIndex);
$("#M_Video").jPlayer("destroy");
$("#M_Video").jPlayer({
ready: function() {
console.log("current: " + videoList[videoIndex]);
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 500,
height: 400
}
});
setTimeout(swapVideo, 10000);
}
/*** CSS: ***/
.divs{position:absolute;top:0;left:0;width:500px;height:400px;background-repeat:no-repeat;}
#M_Start{z-index=1;}
#M_Video{position:absolute;}
#IPage{z-index=3;display:none;}
#i_page_content{height:400px;width:500px;overflow-y:scroll;overflow-x:hidden;z-index:2;}
<!-- *** HTML: *** -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<!--Content A -->
<div id="M_Start" class="divs" align="center">
<div id="M_Video"></div>
<button class="MilleniaStart" onclick="Start()"></button>
</div>
<!--Content B-->
<div id="IPage" class="divs" align="center">
<table cellspacing="0" cellpadding="0" width="500">
<tr><td width="500" align="center"><div id="i_page_content"></div></td></tr>
</table>
</div>
Reference (please upvote):
jQuery jPlayer change media not working

Well, if you are looking for just switching the div's after every 10 secs with infinite loop, check this fiddler.
https://jsfiddle.net/nalinkaggarwal/vj01xezm/`

Using Left and Right navigation button to select different div frames

Functionality:
Users have the freedom to navigate between the 2 frames available for a picture shot. Hence, in the first frame, when the user clicks on the "Right" button; the "Left"button is hidden, the second frame will fadeIn while the first frame will fadeOut. Furthermore, when users are in the second frame and needs to navigate back to the first frame, the user will click on the "Left" button; the "Right" button will then be hidden, the second frame will fadeOut while the first frame will fadeIn.
What has been done:
I have created the 2 frame <div>s and also the method call for the left button and the right button.
Issue:
In the first frame, the left arrow is still hidden, as I have set the class="hidden" for the left arrow. However, when the user navigates to the second frame, the left arrow is still "hidden" while the right arrow is still "shown" when it should be hidden.
Hence, how do I set the conditional check for the 2 frames, such that when the user navigates to the second frame, the "right" arrow is hidden and only the "left arrow is showing", while in the first frame, the "right" arrow is showing and the "left" arrow is hidden.
function Left() {
$('#Photoframe02').fadeOut({
duration: slideDuration,
queue: false
});
$('#Photoframe02').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
$('#Photoframe01').fadeIn({
duration: slideDuration,
queue: false
});
$('#Photoframe01').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
}
function Right() {
$('#Photoframe01').fadeOut({
duration: slideDuration,
queue: false
});
$('#Photoframe01').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
$('#Photoframe02').fadeIn({
duration: slideDuration,
queue: false
});
$('#Photoframe02').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
}
//I think this is a wrong method call to check frame, as both IDs are different
function CheckFrame(page) {
if ($("#Photoframe01").turn("page") = 2) {
// If the page we are currently on is not the first page, reveal the back button
$("#LeftSide").removeClass("hidden");
$("#RightSide").addClass("hidden");
console.log("RoleModels LeftSide is shown");
}
}
.hidden {
display: none;
}
<div id="Active_Camera" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=5; top:0px; left:0px; ">
<img id="Photoframe01" class="hidden" style=" position:absolute; width:1920px; height:1080px; z-index:5; top:0px; left:0px;" src="lib/img/Photoframe01.png" />
<img id="Photoframe02" style=" position:absolute; width:1920px; height:1080px; z-index:5; top:0px; left:1921px;" src="lib/img/Photoframe02.png" />
<button id="LeftButton" onclick="Left()">
<img style="width: 250px; height:250px" src="lib/img/Nav/Left.png">
</button>
<button id="RightButton" onclick="Right()">
<img style="width: 250px; height:250px" src="lib/img/Nav/Right.png">
</button>
</div>

I have solved my own issue.
I have employed the method of having an Index attached to each navigation button. Secondly, I have put the available frames into an array, such that it can be called from a list. Hence, I find this method to be simpler and cleaner.
var selectedFrameIndex = 1;
var framelist = ["Photoframe01.png", "Photoframe02.png", , "Photoframe03.png", , "Photoframe04.png"];
function selectFrame(flag) {
if (flag == "1") {
selectedFrameIndex--;
} else if (flag == "2") {
selectedFrameIndex++;
}
if (selectedFrameIndex <= 0) {
selectedFrameIndex = framelist.length;
} else if (selectedFrameIndex > framelist.length) {
selectedFrameIndex = 1;
}
$("#Photoframe").attr("src", "lib/Photoframe0" + selectedFrameIndex + ".png");
}
<div>
<img id="Photoframe" class="hidden" style=" position:absolute; width:1920px; height:1080px; z-index:6; top:0px; left:0px; display: inline-block; " src="lib/Photoframe01.png" />
<table cellspacing="0" cellpadding="0" width="1080" id="photo_stream">
<tr>
<td width="1080">
<canvas id="canvas" width="1920" height="1080" style="position:absolute; z-index:5; top:0; left:0; margin:auto; display:none;"></canvas>
<button id="CameraActiveButton" onclick="TakePicture()">
<img src="lib/img/PAGE04/SNAPNOW.png">
</button>
<button id="LeftButton" onclick="selectFrame('2')">
<img style="width: 250px; height:250px" src="lib/img/PAGE04/Nav/Left.png">
</button>
<button id="RightButton" onclick="selectFrame('1')">
<img style="width: 250px; height:250px" src="lib/img/PAGE04/Nav/Right.png">
</button>
</td>
</tr>
</table>
</div>

JQuery Cycle not working right

I am trying to do a function after my first slide has shown. I basically want to do the same function after each slide, but my 2nd slide is just still. Nothing is fading in or coming in.
Here is my JQuery
$("#slideshow").cycle({
fx: 'scrollHorz',
pager: '#slideshow-nav',
speed: 600,
timeout: 7000,
pauseOnPagerHover: true,
containerResize: false,
slideResize: false,
fit: 1,
before: beforeSlide,
after: afterSlide
});
function beforeSlide() {
$("#slideText").css('padding-left', '0px');
$("#slideText").css('opacity', '0');
}
function afterSlide() {
$("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
}
Here is my html
<div id="slideshow" class="slides">
<div class="slide" style="background-image: url('slideOne.jpg'); background-color: #e3d7bd;">
<div id="slideText">
<h1>asdf</h1>
<br />
<p>asdf</p>
<p>asdf</p><br />
Get started today
</div>
</div>
<div class="slide" style="background-color: #fff;">
<img class="slideTwoImage" src="slideTwoKid.png"></img>
<div id="slideText">
<h1>Test.</h1>
<br />
<p>asdf</p>
<p>asdf</p><br />
Get started today
</div>
</div>
<!-- <div class="slide" style="background-image: url('slideTwo.jpg'); background-color: #fff; display: none;"></div>
<div class="slide" style="background-image: url('slideThree.jpg'); background-color: #000; display: none;"></div> -->
</div>
It works for the first slide..the animation for the text, but on the 2nd slide it is not working.

Change containerResize: false to containerResize: true then it should work.
See demo here

I figured it out. You have to name elements in the before and after function differently.
I had them both named #slideText as you can tell in the functions. Just name them separate.
$("#slideshow").cycle({
fx: 'scrollHorz',
pager: '#slideshow-nav',
speed: 600,
timeout: 7000,
pauseOnPagerHover: true,
containerResize: true,
slideResize: false,
fit: 1,
before: beforeSlide,
after: afterSlide
});
function beforeSlide() {
$("#slideText").css('padding-left', '0px');
$("#slideText").css('opacity', '0');
$("#slideTextTwo").css('padding-left', '0px');
$("#slideTextTwo").css('opacity', '0');
}
function afterSlide() {
$("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
$("#slideTextTwo").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
}
So now I can make changes on separate slides the way I intended.