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/`
Related
I have a website I'm working on to get a grasp on how to build websites using HTML, CSS, and JS. I'm running into an error where when I put a div above a background animation on the body, the background animation doesn't pass over the div. I don't know how to fix this, and none of my Internet searches seem to solve this issue.
Here is the CodePen for the program: https://codepen.io/ckneeland/pen/Exyjygx
The HTML file is like so:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Data</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper fade-in" id="particles-js">
<table class="center-table">
<tr>
<td><img class="resize" src="Images/Facebook.png" alt="Facebook"></td>
<td><img class="resize" src="Images/Instagram.png" alt="Instagram"></td>
<td><img class="resize" src="Images/Snapchat.png" alt="Snapchat"></td>
<td><img class="resize" src="Images/Twitter.png" alt="Twitter"></td>
<td><img class="resize" src="Images/YouTube.png" alt="YouTube"></td>
</tr>
<tr>
<br>
<br>
<td><img class="resize" src="Images/TikTok.png" alt="TikTok"></td>
<td><img class="resize2" src="Images/Google2.png" alt="Google"></td>
<td><img class="resize" src="Images/Venmo2.png" alt="Venmo"></td>
<td><img class="resize" src="Images/Reddit2.png" alt="Reddit"></td>
<td><img class="resize" src="Images/LinkedIn.png" alt="LinkedIn"></td>
</tr>
</table>
</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
And the JS / CSS files are on the CodePen, but I don't think they're the issue here
The pictures won't show up since I didn't add them to the project here
Also, a small side note: How can I center this div object vertically? It is already centered horizontally.
Use the developer tools to see where elements end. Then use absolute positioning along with an appropriate z-index to create an overlay.
In your example, as little as .center-table { position: absolute } could be what youre after.
As for your second question concenring vertical alignment, I suggest looking into layouting using flexbox.
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#ffffff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 }
},
opacity: {
value: 0.2,
random: false,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 }
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: ["repulse", "bubble"] },
onclick: { enable: true, mode: "push" },
resize: true
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
retina_detect: true
});
var count_particles, stats, update;
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(".js-count-particles");
update = function () {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
<body>
<div id="particles-js">
<div class="fade-in" >
<table class="center-table">
<tr>
<td><img class="resize" src="Images/Facebook.png" alt="Facebook"></td>
<td><img class="resize" src="Images/Instagram.png" alt="Instagram"></td>
<td><img class="resize" src="Images/Snapchat.png" alt="Snapchat"></td>
<td><img class="resize" src="Images/Twitter.png" alt="Twitter"></td>
<td><img class="resize" src="Images/YouTube.png" alt="YouTube"></td>
</tr>
<tr>
<br>
<br>
<td><img class="resize" src="Images/TikTok.png" alt="TikTok"></td>
<td><img class="resize2" src="Images/Google2.png" alt="Google"></td>
<td><img class="resize" src="Images/Venmo2.png" alt="Venmo"></td>
<td><img class="resize" src="Images/Reddit2.png" alt="Reddit"></td>
<td><img class="resize" src="Images/LinkedIn.png" alt="LinkedIn"></td>
</tr>
</table>
</div>
</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
hope this is the result you looked for , basically I have added a div for the animated background separate from the wrapper fadein div , and fadein class determined as
postion: fixed; than you can position it with left: xx;
top:xx; right:xx; bottom:xx; properties
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>
I am confused about the pauses and the seemingly erratic behaviour of the animations. The pauses are way longer than 2000ms and the animation jumps way farther then I want it to.
function myFunction() {
myVar = setInterval(slideit, 2000);
}
I want to run a sequence of animations every 2 seconds (or 6 seconds rather, but for testing I'll go with 2) but the result seems kind of weird.
What am I doing wrong?
I am aware that I do not need callbacks for animations but the whole thing went out of sync when the window was minimized then, so I hoped that using callbacks could prevent that.
var myVar;
var countit;
countit = 1;
function myFunction() {
myVar = setInterval(slideit, 2000);
}
function slideit() {
$(".bannertext").animate({ // Text out
opacity: 0,
"left": "-200px"
}, 500, function() {
$(".imgcontainer").animate({ // Next Image
"top": -($(".imgcontainer").height() * countit)
}, 500, function() {
$(".bannertext").animate({ // Text in
opacity: 1,
"left": "-20px"
}, 500);
});
});
countit = countit + 1;
if (countit == $(".imgcontainer").length) {
countit = 1;
}
}
myFunction();
#banner {
background: url(img/rauch-klein.jpg);
overflow: hidden;
height: 350px;
background-size: cover;
}
#subbanner {
width: 800px;
margin: 0 auto;
}
#banner .imgcontainer {
position: relative;
text-align: left;
height: 350px;
}
#banner img {
height: 100%;
vertical-align: middle;
position: absolute;
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="banner">
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugarm 150mm</div>
<img src="img/units/absaugarm.png" style="vertical-align:middle;">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugarm 200mm</div>
<img src="img/units/absaugarm-200mm.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugkran</div>
<img src="img/units/absaugkran.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugtisch</div>
<img src="img/units/absaugtisch.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">AIRTECH P10</div>
<img src="img/units/Airtech_P10.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">AIRTECH P30</div>
<img src="img/units/Airtech_P30.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">BlowTec</div>
<img src="img/units/BlowTec.png">
</div>
</div>
From the Jquery docs:
If multiple elements are animated, the callback is executed once per
matched element, not once for the animation as a whole
That means the complete function is called for each bannertext class element. If you don't want to fadeout only specific elements, the quickest solution is referring to this inside the callback function.
function slideit() {
var cnt = countit;
$(".bannertext").animate({ // Text out
opacity: 0,
"left": "-200px"
}, 500, function() {
$(this).parent().animate({ // Next Image
"top": -($(".imgcontainer").height() * cnt)
}, 500, function() {
$(this).children(".bannertext").animate({ // Text in
opacity: 1,
"left": "-20px"
}, 500);
});
});
countit = countit + 1;
if (countit == $(".imgcontainer").length) {
countit = 1;
}
}
jsfiddle example.
(Another side effect was that countit was increased right away. In normal execution it would have been increased before the first complete callback was executed. That's why a temp variable cnt is used as well)
I have but zero appitude to code anything. I am trying to build a small simple website and am almost done but have one little issue left to solve. I know this has been asked here before and I have tried to figure out how to make there circumstance work for me but can't. I have even tried the easy jquery fade in and fade out methods but can't get the id's correct or something?
All I want to do is fade in and out between the divs when the links are clicked.
I have tried and reviewed many examples here and still can't get it to connect at all.
Any help would be appreciated.
I have three links on a page that loads three different divs into a container. Everything is on the same page and everything works great other than I can't get them to fade in and out when the links are clicked. I have no problem loading the jquery library and doing it that way if that works best.
<head>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3 {
display:none;
overflow:hidden;
background-color: #E6E1E6
</style>
</head>
<body style="background-color: #E6E1E6">
<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
</div>
</body>
</html>
You mentioned using jQuery, this is a basic idea. Comments in code should explain what is happening. I altered the HTML a little by adding some classes and some data attributes.
$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder
evt.preventDefault(); //stop click event
var anchor = $(this); //get the link that was clicked on
if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do
return;
}
anchor.siblings().removeClass("active"); //find previous selectd link and unselect it
anchor.addClass("active"); //add class to current link and select it
var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show
var visibleContainer = $(".tab-container:visible");
var complete = function() { //function to call when fade out is complete
$(showTab).stop().fadeIn(300);
};
if (visibleContainer.length) { //make sure w have something to hide
$(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete
} else {
complete(); //if first time, just show it
}
}).find("a").eq(0).trigger("click"); //click on first link to load tab content.
.tab-container {
display: none;
overflow: hidden;
}
#container1 {
background-color: #E60000;
}
#container2 {
background-color: #00E100;
}
#container3 {
background-color: #0000E6;
}
a.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="position: fixed; width: 100%; z-index: 200;">
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
Here's a simple example using jQuery - Not sure what you're end product is meant to look like but this should set you on the right foot.
Here's a sample snippet of the JS:
$(document).ready(function(){ //Wait for DOM to finish loading
$('.navigation a').click(function(){ //When the a link is clicked
var id = $(this).attr('href'); //grab its href as the ID of the target object
$('.hidden-content').fadeOut(500); //Fade out all the divs that are showing
$(id).fadeIn(500); //Fade in the target div
return false; //Prevent the default action of the a link
});
});
Check out the jsFiddle here: http://jsfiddle.net/pavkr/7vc2jj5j/
Here is some quick script to do the fading, but i would suggest you to use jQuery for same since it will be cross-browser.
Just update your script block, and it will work, no need to change any other code
Vanilla JS
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
fadeIn(document.getElementById('container'+idInfo), 20);
}
function fadeIn(element, duration) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, duration);
}
</script>
Using jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv(idInfo) {
$('#divLinks div').hide(200, function(){
//Show the clicked
$('#container'+idInf).fadeIn(200);
});
}
</script>
i am trying to figure out how to make draggable and scollable work simulatnoeusuly:
http://159.8.132.20/alldevice/
when u try to drag image on either side draggable action also starts, i want that area to be easily scrollable, means when i am scrolling draggble event should not be there
var $drop = $('#canvas-drop-area,#canvas-drop-area1'),
$gallery = $('#image-list li'),
$draggedImage = null,
$canvasp1old = null,
$canvasp2old = null;
$gallery.draggable({
//refreshPositions: true,
scroll: false,
start: function(e) {
$draggedImage = event.target;
$drop.css({
'display': 'block'
});
},
helper: function(e) {
return $('<img src="' + $(this).find('img').attr("src") + '" width="'+imgwidth+'">');
},
stop: function() {
$draggedImage = null;
},
revert: true
});
This might help you.
HTML
$("#draggable").draggable({
snap: true
});
$("#draggable2").draggable({
snap: ".ui-widget-header"
});
$("#draggable3").draggable({
snap: ".ui-widget-header",
snapMode: "outer"
});
$("#draggable4").draggable({
grid: [20, 20]
});
$("#draggable5").draggable({
grid: [80, 80]
});
.draggable {
width: 90px;
height: 80px;
padding: 5px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p,
.ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 600px;
width: 200px;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<table>
<tr>
<td>
<div id="draggable" class="draggable ui-widget-content">
<p>Default (snap: true), snaps to all other draggable elements</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p>I only snap to the big box</p>
</div>
</td>
<td>
<div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p>
</div>
</td>
<td>
<div id="draggable3" class="draggable ui-widget-content">
<p>I only snap to the outer edges of the big box</p>
</div>
<div id="draggable4" class="draggable ui-widget-content">
<p>I snap to a 20 x 20 grid</p>
</div>
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</td>
</tr>
</table>
javascript
$(function() {
$("#draggable").draggable({
snap: true
});
$("#draggable2").draggable({
snap: ".ui-widget-header"
});
$("#draggable3").draggable({
snap: ".ui-widget-header",
snapMode: "outer"
});
$("#draggable4").draggable({
grid: [20, 20]
});
$("#draggable5").draggable({
grid: [80, 80]
});
});
For Mobile you can use jquery ui touch punch it will help you and best solution is here
as per my knowledge jquery and jquery-ui is working awesome on 159.8.132.20/alldevice/.