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/
Related
I'm trying to display some complex text next to a picture when a button is clicked. So far I made the picture appear randomly when the button us clicked.
I cannot make the text work(it's basically a list) in the function, so I want to add the text in HTML and make it display/hide depending on the random number.
The picture and the text must correspond.
I also tried to make the text and picture(that are declared in HTML) display/hide depending on a number only with a function. But it didn't work for me.
That's the HTML i have:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "utf-8">
<title>Project</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<script src= "javaindex.js"></script>
<button onclick="myFunc()" id="select" class="choosebtn">Select</button>
</div>
<div class="main">
<img src="blank.jpg" name="picture">
<div id="text">
<p id="list1" >
<h1> headingN</h1>
<ul>
<li>elementN1</li>
<li>elementN2</li>
<li> elementN3</li>
</ul>
</p>
<p id="list2" >
<h1> heading</h1>
<ul>
<li>element1</li>
<li>element2</li>
<li> element3</li>
</ul>
</p>
</div>
</div>
<footer>Footer</footer>
</body>
</html>
The js.file is:
function myFunc() {
imgArray = new Array()
imgArray[0] = "image1.jpg"
imgArray[1] = "image2.jpg"
imgArray[2] = "image3.jpg"
imgArray[3] = "image4.jpg"
document.getElementById("select").onclick = myFunc;
randomN = Math.floor(Math.random()*4);
document.picture.src = imgArray[randomN];
if ( randomN == 0 ){
document.getElementById("list1").style.display = "block";
}
else if ( randomN == 1){
document.getElementById("list2").style.display = "block";
}
else{
document.getElementById("text").style.display = "none";
}
}
hope this trick will helps..
I created a container for all the text content (act as my parent div)
and create a div for each content (child divs) then add ids that corresponds on my random numbers.
<img src="http://via.placeholder.com/350x150?text=Default" name="picture">
<div id="container" class="main">
<div id="content" style="border: 1px solid #000; width:350px;">
<h1> Heading Default</h1>
<p>Sample Default Message Sample Default Message</p>
</div>
<div id="content1" style="border: 1px solid #000; width:350px; display: none;">
<h1>Heading 1</h1>
<p>Sample One Message Sample One Message</p>
</div>
<div id="content2" style="border: 1px solid #000; width:350px; display: none;">
<h1> Heading 2 </h1>
<p>Sample Two Message Sample Two Message</p>
</div>
<div id="content3" style="border: 1px solid #000; width:350px; display: none;">
<h1>Heading 3 </h1>
<p>Sample Three Message Sample Three Message</p>
</div>
</div>
then do the trick with javascript by hiding all (child divs) and just leave the divs you want to show please see the working fiddle below.
working fiddle: https://jsfiddle.net/a1pLnbm0/26/
Hope I get it right Cheers!
I found this code while searching and was wondering if it is possible to extend it so that i can have more than 2 'pages' on the project i am creating?
here is the code:
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
Not the most elegant solution but it works :)
<html>
<head>
<style>
ul li {
display: inline-block;
}
.shown: {
display: block;
}
.hidden: {
display: none;
}
</style>
</head>
<body>
<ul>
<li class="links" data-link="0">Page1</li>
<li class="links" data-link="1">Page2</li>
<li class="links" data-link="2">Page3</li>
<li class="links" data-link="3">Page4</li>
</ul>
<div class="pages" id="Page1" data-item="0">
Content of page 1
</div>
<div class="pages" id="Page2" data-item="1" style="display:none">
Content of page 2
</div>
<div class="pages" id="Page3" data-item="2" style="display:none">
Content of page 3
</div>
<div class="pages" id="Page4" data-item="3" style="display:none">
Content of page 4
</div>
<script>
(function() {
var links = document.querySelectorAll('.links');
var pages = document.querySelectorAll('.pages');
for(var i=0;i<links.length;i++) {
links[i].addEventListener('click', function() {
for(var j=0;j<pages.length;j++) {
pages[j].setAttribute('style', 'display: none');
if(this.getAttribute('data-link') === pages[j].getAttribute('data-item')) {
pages[j].setAttribute('style', 'display: block')
}
}
})
}
}());
</script>
</body>
</html>
Yes, you can extend the code to as many pages you want on a single page. This code simply gives you link to show different content on a same page. You will have to change your script according to your need.
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
<div id="Page3" style="display:none">
Content of page 3
Show page 3
</div>
</body>
</html>
<script>
var lastPage = 'Page1';
function show(shown) {
document.getElementById(shown).style.display='block';
document.getElementById(lastPage).style.display='none';
lastPage = shown;
return false;
}
</script>
Show page 2
I'm creating a small jQuery Mobile application. I have a home page with a banner image, a paragraph loaded from a json file, and a link to a second page that has a linked list, also loaded from the json file.
The home page:
<!DOCTYPE html>
<html>
<head>
<title>BikeShare</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
#banner {
height: 175px;
overflow: hidden;
position: relative;
}
#banner img {
display: block;
position: absolute;
bottom: 0;
margin-right: auto;
margin-left: auto;
max-width: 100%;
}
.bold {
font-weight: bold;
border-bottom: 1px dotted;
}
</style>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
function getLocations(data) {
var locations = data.stationBeanList;
var numLocations = 0;
var numBikes = 0;
for (var i = 0; i < locations.length; i++) {
if (locations[i].statusValue === 'In Service' && locations[i].availableBikes > 0) {
numBikes += locations[i].availableBikes;
numLocations++;
}
}
var message = '<p>There are a total of <span class="bold">' + numBikes + ' bikes</span> available in <span class="bold">' + numLocations + ' locations</span>.</p>';
$("#home-content-heading").after(message);
}
$(document).on("pagecreate", "#home", function() {
$.ajax({
url: "bikeshare.json",
type: "GET",
dataType: "json",
success: getLocations,
error: function() { console.log( 'Error...' ); }
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
<ul data-role="listview">
<li>Home</li>
<li>Reports</li>
<li>Locations</li>
</ul>
</div>
<div id="home-header" data-role="header" data-position="fixed" data-theme="b">
<h1>Home</h1>
Menu
</div>
<div id="banner"><img src="bicycle-rental-dock.jpg" alt="A bicycle rental dock" /></div>
<div role="main" id="home-content" class="ui-content">
<h1 id="home-content-heading">BikeShare</h1>
View Locations
</div>
<div data-role="footer" data-theme="b">
<h4>© 2015 BikeShare</h4>
</div>
</div><!-- end #home -->
</body>
</html>
The second page with the linked list:
<!DOCTYPE html>
<html>
<head>
<title>BikeShare</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate", "#locations", function() {
function loadData(data) {
var locations = data.stationBeanList;
var list = '';
for (var i = 0; i < locations.length; i++) {
list += '<li>' + locations[i].stationName + '</li>';
}
$("#location-list").append(list).listview('refresh');
}
$.ajax({
url: "bikeshare.json",
type: "GET",
dataType: "json",
success: loadData,
error: function() { console.log('Failed to load bikeshare.json'); }
});
});
</script>
</head>
<body>
<div data-role="page" id="locations">
<div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
<ul data-role="listview">
<li>Home</li>
<li>Reports</li>
<li>Locations</li>
</ul>
</div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Locations</h1>
Menu
</div>
<div role="main" class="ui-content">
<ul id="location-list" data-role="listview"></ul>
</div>
<div data-role="footer" data-theme="b">
<h4>© 2015 BikeShare</h4>
</div>
</div><!-- end #locations -->
</body>
</html>
The issue I'm having is when I click on the link and go to the second page, the listview (from json file) does not display unless I hit the browser refresh button. And if I hit refresh and then hit the browser back button, the banner on the first page does not have the custom css applied to it, in addition, the data that was previously loaded and displayed from the json file, it's no longer there. I do not see where I went wrong with my code. Any help is appreciated.
jQuery Mobile by default loads external pages via ajax into the current page's DOM. However, it only loads the markup of the first DIV with data-role="page".
So, you can move the locations javascript into the data-role="page" DIV.
If you don't like the AJAX navigation system, you can 'turn it off', but then you lose the nice transitions.
Read this: http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/
I am making a webpage that is continuous scrolling. However I am unable to make it scroll smoothly
My html code is:
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- Logo -->
<a class="brand" href="index1.html">MAPPLAS</a>
<ul class="nav">
<li>Inicio</li>
<li>Portfolio</li>
<li>Equipo</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
</div><!-- end .container -->
</div><!-- end .navbar-inner -->
</nav> <!-- end .navbar -->
My function is as follows:
((function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
});
})();
I think there is a problem because I have another function which creates a buttom back-to-top, that function is as follows:
((function() {
$('<i id="back-to-top"></i>').appendTo($('body'));
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop:0},600);
});
})();
The thing is that one is working smoothly ( the back to top ) but the other is not. I am not an expert on js and I have tried including completely separated js scripts but nothing solves the problem.
Anyone has an idea why is not working??Thank u!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style type="text/css">
.container{
width:300px;
margin:0 auto;
}
.section{
margin-top:60px;
}
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
HTML
JavaScript
jQuery
PHP
CSS
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p>
put your text about html here
</p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p>
put your javascript details here.
</p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p>
Put your details about javascript here
</p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p>
put your details about php here
</p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p>put your details </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var offset = 60;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 3000);
event.preventDefault();
});
});
</script>
</body>
</html>
In my code , I want to show the default content of first link on page .
Below is my code , Here when I click on some link that time it it loads its content ,
Instead of that I want to show first link content on pages load , After user cliks on any link the the content has to get change
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
</div>
<script>
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('id');
$(toShow).show();
});
</script>
</body>
</html>
Below is JSFiddle link
http://jsfiddle.net/vP3Wj/
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="content1" class="toggle" style="">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
</div>
<script>
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('id');
$('#'+toShow).show();
});
</script>
</body>
</html>
This way you have one div open at page load by ommiting the display:none on the content you want.
#content1 is not a valid id. Try using the href attribute instead.
Just add another div for your default content, but not hided by default like the other divs, so like this:
<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="defaultcontent" class="toggle">Default Content</div> <!-- HERE -->
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
...
See working example
I would change your markup a bit, Im not to sure that # in a valid ID value, you could just use it as an hash/anchor on your links:
http://jsfiddle.net/vP3Wj/2/
when the page loads every block is hidden, we find all the a-elements and bind an click event on them. after that we filter out the first one of them and trigger its click event with jquery.
html:
Show content 1
Show content 2
Show content 3
<div id="contents">
<div id="content1" class="toggle">show the stuff1</div>
<div id="content2" class="toggle">show the stuff2</div>
<div id="content3" class="toggle">show the stuff3</div>
</div>
and the javascript:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr("href");
$(toShow).show();
}).filter(":first").click();