I downloaded the jQuery files to create image sliders for my Website, but it's not working at all. Can somebody teach me which codes I have problems? thank you..
<body>
<ul class="slider" "position: relative; top: 0px; left: 0px; width: 600px;
height: 300px;">
<li><div class="slick"><img src="./images/sample-01.png"></div></li>
<li><div class=""><img src="./images/sample-02.png" /></div></li>
<li><div class="slick"><img src="./images/sample-03.png" /></div></li>
<li> <div class="slick"><img src="./images/sample-01.png" /></div>
<li> <div class="slick"><img src="./images/sample-02.png" /></div></li>
<li><div class="slick"><img src="./images/sample-03.png" /></div></li>
</ul>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script src="jquery-migrate-1.2.1.min.js"></script>
<script src="slick.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($){
var_slideshowTransitions = [
{$Duration:1200,$Opacity:2}
];
var options={
$SlideDuration:500,
$AutoPlay:true,
$DragOrientation:3,
$Idle:1500,
$slideshowOptions: {
$Class:$JssorslideshowRunner$,
$Transitions:_slideshowTransitions,
$TransitionsOrder:1,
$ShowLink: true
}
};
var slider= new $Slider$("slider", options);
});
</script>
First off, your HTML is poorly structured and invalid. You didn't close your 4th <li> element, also, in the <ul> element, you have to use the style attribute to apply styles inline. In your case, like this: <ul class="slider" style="position: relative; top: 0px; left: 0px; width: 600px;height: 300px;">.
I have no idea where you got that Javascript code from but the slickJS documentation is pretty simple to follow.
My code below implements a slideshow which you can copy, paste and modify, if you like. Look into the docs. You can set or change a ton of options to help get your slider to do what you want. Also, make sure you are importing everything in the correct order. jQuery -> slickjs -> custom Javascript. Make sure the slick CSS is linked in the head.
$(document).ready(function (){
$('.slider').slick({
dots:true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
/*
modify the slider container with your own custom CSS
to have it fit or placed in your page how you want.
*/
.slider {
width:70%;
margin:0 auto;
}
/*
I put divs inside that can have their padding modified
so the images aren't directly up against each other.
Feel free to play with this CSS to desired affect.
*/
.slide-image-container {
padding:2%;
}
/*
This CSS forces the inner images to size to the parent (slide) container
*/
.slide-image-container img {
width:100%;
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
</div>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
Related
window.onscroll= function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
<header id="home">
<nav id="navbar">
<div class="row flex">
<img src="img/logo.png" class="logo" alt="logo">
<ul>
<li>home</li>
<li>service</li>
<li>team</li>
<li>skill</li>
<li>portfolio</li>
<li>review</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="row">
<div class="hero-text-box">
<h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
work with us!
</div>
</div>
</header>
Hello there, I am new to web development,after learning css and html I am doing some practice projects through youtube. That guy used a jquery plugIn that is not working correcting now. I have googled and saw some youtube videos but no help there,it is important to know that I am a beginner in javascript, so I cannot do much with js part. Right now I am using the js code from w3school but it serves half of my demand. The issue is with navbar. I want to blend the navbar with the homepage but as soon as I scroll and reach certain point like other sections it will stick on the top.
You will have to specify at what position you want to stick that bar. Position: Sticky works with some position where you want to stick that navbar. For Example:
position: sticky;
top: 3rem;
change your css from:
.sticky {
position: fixed;
top: 0;
}
to
.sticky {
position: sticky;
top: 0;
}
Refer to this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Try providing the top where you want to stick the bar while scrolling.
try with below code:
<!DOCTYPE HTML>
<html>
<style>
.sticky{
position: sticky;
top: 0;
}
</style>
<header id="home1">
<nav id="navbar" class="sticky">
<div class="row flex">
<img src="img/logo.png" class="logo" alt="logo">
<ul>
<li>home</li>
<li>service</li>
<li>team</li>
<li>skill</li>
<li>portfolio</li>
<li>review</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="row">
<div class="hero-text-box">
<h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
work with us!
</div>
</div>
</header>
</html>
I'm trying to fix a thumbnail BxSlider to work properly. I'm struggling with those:
1) When clicking on a thumbnail image the thumbnail slider has to slide along with the main slider.
2) And also making the main slider dragable. In order to change slides with the mouse.
3) The thumbnail arrows dont move the slides.
I've made an JSFIDDLE for you to see
And this is my my js code:
$(function() {
var initThumbnailsSlider = function(object) {
var $bxSlider = $(object);
if ($bxSlider.length < 1) {
return;
}
$bxSlider.bxSlider({
controls: false,
pagerCustom: '#bx-pager',
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500
});
$('.bx-custom-pager').bxSlider({
mode: 'horizontal',
maxSlides: 4,
minSlides: 2,
slideWidth: 156,
slideMargin: 25,
easing: 'easeInOutQuint',
controls: true,
nextText: "<i class='icm icm-Arrow_right'></i>",
prevText: "<i class='icm icm-Arrow_left'></i>",
pager: false,
moveSlides: 1,
infiniteLoop: false,
speed: 500,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
};
// execute the function
initThumbnailsSlider('[data-bx-slider]');
});
Thanks a lot.
============================================
I've made a little search and i updated my JSFIDDLE
And I changed that part of my js code:
But sometimes it freezes :/
$bxPager.bxSlider({
mode: 'horizontal',
maxSlides: 4,
minSlides: 2,
slideWidth: 156,
slideMargin: 25,
easing: 'easeInOutQuint',
controls: true,
pager: false,
moveSlides: 1,
speed: 500,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
$bxSlider.goToSlide(idx);
}
I've used BxSlider before and haven't tried the slider you want to achieve. However, If you won't mind, I suggest that you try Slick. Below is a sample code that perfectly achieve what you want for your slide with lesser blocks of codes.
$('.product-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.custom-pager'
});
$('.custom-pager').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.product-slider',
dots: false,
centerMode: true,
focusOnSelect: true
});
.custom-pager .img-container {
width: 167px;
height: 165px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.product-slider .img-container {
height: 525px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.slide a{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="bxslider product-slider">
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
</div>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
</div>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
</div>
</li>
<!-- li :end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
</div>
</li>
<!-- li :end -->
</ul>
<ul id="bx-pager" class="custom-pager">
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="0">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="1">
<div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="2">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="3">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
</div>
</a>
</li>
<!-- li : end -->
</ul>
UPDATE
Since the original code is closer to what you wanted, but IMO not as good as the newer version, I figured I'll add it here:
Every click on an arrow advances both sliders in the same direction.
Every 6 clicks in one direction will cause the top slider to return to the same slide as the second slider's middle slide.
A click on one of the second slider's slide will make the first slider jump to the corresponding slide.
For some reason, the stack snippet is having DNS issues, so take a look at the
PLUNKER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SO35203571-38778710</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" />
<style>
#bx-pager {
left: 25px;
}
.bx-wrapper a.active {
border: 2px solid red;
}
.bx-controls-direction a {
top: -100% !important;
}
}
</style>
</head>
<body>
<ul class="bxslider">
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/trees.jpg" />
</li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href="">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" />
</a>
<a data-slide-index="1" href="">
<img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" />
</a>
<a data-slide-index="2" href="">
<img src="http://bxslider.com/images/730_200/houses.jpg" width="100" />
</a>
<a data-slide-index="3" href="">
<img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" />
</a>
<a data-slide-index="4" href="">
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" />
</a>
<a data-slide-index="5" href="">
<img src="http://bxslider.com/images/730_200/trees.jpg" width="100" />
</a>
</div>
<script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
$(function() {
var bx = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
var cx = $('#bx-pager').bxSlider({
mode: 'horizontal',
maxSlides: 3,
minSlides: 3,
moveSlides: 1,
slideWidth: 275,
slideMargin: 40,
pager: false,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
});
</script>
</body>
</html>
When I wrote that, my intentions was to sync both sliders, but what I didn't know back then is that when using a carousel and using a variable range on min/maxSlides option gets really messy. bxSlider will clone slides in order to cover any inconsistencies like having an odd number of slides on an infiniteLoop while a resize occurs. That's a ton of calculations and memory, hence bxSlider freezing up, or ending up with slides only clearing halfway past the edge are common occurrences.
I've refactored it then added your Pokemon theme and Bootstrap to my original Fiddle. There are a number of changes but I'll try to keep it brief:
Using the advanced easing options like: easing:'ease-in-out' requires:
useCSS: true (default)
jQuery Easing script loaded. So this should be added after the jquery.bxslider.min.js <script> tag:
<script src="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"></script>
Btw 'easeInOutQuint' isn't a value available with easing option, it's now `easing:'ease-in-out'. I have no idea why I added it in the first place.
The thumbnail slider .bx-pager is now immobilized for 2 good reasons:
The design of thumbnail navigation (or any navigation for that matter), should be presented in it's full capacity.
The extra coordination involved in syncing a slider that presents one slide (i.e. .bxslider) and a slider that presents 4 slides (i.e. .bx-pager) becomes problematic.
instantiate bxSlider in an expression:
var bx = $('.bxslider').bxSlider();
This makes using methods easier:
bx.goToSlide()
Removed all controls since .bx-pager is more than sufficient.
Tricked out thumbnails:
Used PNGs with a transparent background.
Added a simple function that toggles a class .on to the active thumbnail (i.e. .imgThumb.on}
This .on class employs transform, position, z-index, and transition CSS properties to animate.
If you resize the width smaller, you'll see the thumbnails layer on top of each other. That's a nice effect possible by using transparent background and avoiding cropping. So the background-size: cover which crops images is changed to background-size: contain which proportionally stretches the image to an element's edges without cropping.
Here's the demo. Good luck, sir.
FIDDLE
I can't make particles.js work as a background. It covers the entire page, I've tried setting a higher z-index (50) for everything I want to cover particles.js with. Here's the particles codepen. The codepen has no background, therefor the particles are not visible.
The code below is what I'm trying to set as background for <section id="services">.
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- stats - count particles -->
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
The problem is that it covers everything inside <section> as well, not sure why.
The code you're about to see is nothing but a butchered ole' bootstrap template. Never intended to make any real use of it in the first place, hence the confusing amount of style attributes.
<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
<div class="container" style="padding-top:10px;margin-top:10px;">
<div class="row text-center" style="margin-left:auto;margin-right:auto;">
<div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
<button id="reload" onclick="return returnGame();clearDescr();">
<div class="notspinning" id="theSpinner"></div>
</button>
<span id="findMe">
<a href="" id="steamLink" style="color:#333" target="_blank">
<h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
</a>
</span>
<p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
</div>
</div>
</div>
</section>
Any sort of guidance just in the right direction would be much appreciated.
have you tried setting an element as the background, e.g. position: fixed; top:0; right: 0; bottom: 0; left: 0; z-index: 0 and then another div for your content position: relative?
e.g. http://codepen.io/alexander-holman/pen/rebroK
In its simplest form your markup would look like:
<style>
#particle {
background-color: #b61924;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
}
#overlay {
position:relative;
}
</style>
<div id="particle"></div>
<div id="overylay">[Your content here]</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
var options = {};
particlesJS("particle", options);
</script>
I'm trying to create a full width, fixed-height, carousel image-slider for the home page of a website that I'm working on.
That is, where the images are scaled to a fixed-height (matching the carousel height (the width doesn't matter)) which scales responsively as the page itself does.
However, I want my slider to be of lighter weight/ greater simplicity.
Here is my code thus far:
(here is the head)
<head>
<!-- Flex Slider API JS -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 360,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<!-- End of FlexsliderAPI JS -->
</head>
Here is the body:
<body>
<!-- Placement of Flex Slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="../../local/images/slide1.JPG" />
</li>
<li>
<img src="../../local/images/slide2.JPG"/>
</li>
<li>
<img src="../../local/images/slide3.JPG" />
</li>
<li>
<img src="../../local/images/slide 5.jpg" />
</li>
</ul>
</div>
</div>
<!-- End placement of FlexSlider -->
</body>
And here is the CSS:
.flex-container {
width: 100%;
height: 300px;
}
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
}
.flex-container li {
list-style: outside none none;
display: inline;
}
.flexslider .slides img {
width: inherit;
max-height: inherit;
}
Thanks a ton for the help. - Cody
not snapping to height bounds
I don't see anything in flexslider that does anything with the height. Make sure all the elements are the same height, either by creating similarly sized thumbnails or enforcing a height with CSS. You might need to remove the itemWidth configuration to avoid stretching.
not displaying navigation
Your HTML is missing the navigation elements. I think you need to configure it; pass the navigation options:
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",
The configuration offercard uses is:
slideshowSpeed:7000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:2000,
prevText:"< PREV",
nextText:"NEXT >",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0
i have 4 images and then i have applied automatic swiping,It's working nice,but now i have added text (skip) on Image when i click on Skip,text is Redirected to another page(text.html)
My Problem is When i Click Skip it's Redirected page(text.html) but page css not applied.
But with out click on skip with automatic sliding redirected page(text.html) is fine.
<div id="container">
<img src="../images/4 copy.jpg" alt=""/><br/>
<div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font> <font color="white"><span class="one">skip</span></font>
</div>
</div>
when click skip it's redirect to text.html but text.html css not applied total page will changed
when call direct text.html it's displayed nice css also applied
can you please tell me how to make css apply to text.html when i click skip.
Thanks in Advanced
Text.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css">
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
<style>
.ui-page {
background-color: #666 !important;
}
.ui-content {
background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
background-size : 100% 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}
</style>
<script type='text/javascript'>//<![CDATA[
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="p1">
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"></h3>good day</h3></li>
</ul>
</div>
</div>
</body>
</html>
This is a common jQuery Mobile misconception.
You need to learn how jQuery Mobile handles pages. Only initial HTML file is fully loaded into the DOM. Every other HTML page is only partially loaded, basically lets say we have 2 HTML files, one is called index.html and second one is called second.html.
When jQuery Mobile app is initialized, framework will load index.html into the DOM.
When you go to other page, in our case second.html, only data-role="page" container div is going to be loaded into the DOM, everything else is discarded.
This is because jQuery Mobile used AJAX for page handling. If first file is already inside the DOM, there's no reason in loading HEAD content of other HTML files.
Read more about it here.
In your case just move your <style></style> to a data-role="page" container div.
Basically do this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css"/>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
<script type='text/javascript'>//<![CDATA[
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="p1">
<style>
.ui-page {
background-color: #666 !important;
}
.ui-content {
background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
background-size : 100% 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}
</style>
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started <br/>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started <br/>
Fill in your Deatails to Get Started </p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"><h3>good day</h3></li>
</ul>
</div>
</div>
</body>
</html>
for js try
document.location = url
with jQuery you can define class on which you can perform an on-click event
like
$( ".skipclass" ).on( "click", function() {
// do something here like
// window.location.href='the_link_to_go_to.html';
// or ajax request
});
further info http://api.jquery.com/on/