I have two pages in jquery. When I clicked page two, I want to copy content of pageone to pagetwo. Because I have three pages in another project. I simulated here easily to show my problem. Back to problem, it copies content with id "pageone" but collapsibleset widget doesnt work properly.
Example on JSfiddle
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
function showPage(pageId){
var content = $("#"+pageId).html();
$("#pagetwo").html(content);
$("#"+pageId).html("");
$("#external_page_link").click();
}
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<a onclick="showPage('pageone')" data-rel="page" class="filter_panel ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" >Page2</a>
<div id="asd" data-role="main" class="ui-content">
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
<a href="#page2" id="external_page_link" ></a>
<div data-role="page2" id="pagetwo">
</div>
</body>
</html>
Related
Im trying to make a swipe event , on page 1 its can be swipe to the page 2 , but from page 2 its not working , what is wrong here ? its only works on page 1 , what shall i do ?
(Page mostly code , i need more char)
Im trying to make a swipe event , on page 1 its can be swipe to the page 2 , but from page 2 its not working , what is wrong here ? its only works on page 1 , what shall i do ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeIn();
$('#page3').fadeOut();
});
});
$(document).on("pagecreate","#page2",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
});
$(document).on("pagecreate","#page3",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 1</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 2</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 3</p>
</div>
</div>
</body>
</html>
$(document).on("pagecreate","#page1",function(){
console.log("page1");
$("#p1").on("swiperight",function(){
console.log("page 1's p");
//$('#page1').fadeOut();
$('#page1').fadeOut();
$('#page2').fadeIn();
$('#page3').fadeOut();
});
});
$("#p2").on("swiperight",function(){
console.log("page 2's p");
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
$("#p3").on("swiperight",function(){
console.log("page 3's p");
$('#page1').fadeOut;
$('#page2').fadeOut;
$('#page3').fadeIn;
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<p id="p1" style="border:1px solid black;margin:5px;">PAGE 1</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content">
<p id="p2" style="border:1px solid black;margin:5px;">PAGE 2</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="main" class="ui-content">
<p id="p3" style="border:1px solid black;margin:5px;">PAGE 3</p>
</div>
</div>
</body>
</html>
see i have used console.log to slove error. you have used all document event that not going to invoke just use one and you have used all p event that also not work instead use id for every p. i hope you satisfied.
I connected my templete.php to style.css but when I am changing anything in templete.php, it's showing the result but if I change anything in the stylesheet, it shows no result. what should I do?
My website is not live. i am doing it on wamp server.
templete.php
<!DOCTYPE html>
<html>
<head lang="en">
<title>SEO SOBER</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merienda"
rel="stylesheet"
<head>
<body>
<header id="particles-js">
<?php
include "navbar.php";
?>
</header>
<!--..... header ends.......-->
<div class="clients">
<h3>Our Clients</h3>
<img class="client-img" src="images/clients.png">
</div>
<!--clients ends -->
<div class="container-About">
<div class="text">
<h3>SEO SOBER Digital Story</h3>
<p>about company</p>
</div>
<div class="button">
READ MORE
</div>
</div>
<!-- about ends -->
<div class="features">
<h3>Services</h3>
<div class="maincontainer">
<!-- first card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/seo-gif-10.gif">
<h4>Search Engine Optimization</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- second card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/web-design-service.gif">
<h4>Web Design</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- third card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/Development.gif">
<h4>Web Development</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- fourth card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/social.gif">
<h4>Social Media Marketing</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- services end-->
<script src="js/particles.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
please tell me what to do...
I am trying to do changes for half an hour but nothing happenes.
I also add the particles effect. is that the problem?
i think you are loading your cache, you have to hard reset your page. Try reloading like this on your page:
> -Hold the Ctrl key and press the F5 key.
> -Hold the ⇧ Shift key and click the Reload button on the navigation toolbar.
> -Hold the Ctrl key and click the Reload button on the navigation toolbar.
> -Hold the ⇧ Shift key and press the F5 key.
I want something like the attached image. I am able to do the same look except blurring the background. I tried making it using angularjs. I am unable to blur. How can I make it as the below image. I have used the below angular code to make the page blur. I have searched and I have got blurring a page except a form. But in this case it is not a form. I want to blur the page except div content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="container">
<center>
<h3 class="container">Select a type</h3>
<div>This is to test the page:
<div class = "btn-group pull-center">
<button type = "button" class = "btn dropdown-toggle" data-toggle = "dropdown">Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
</center>
</div><br/><br/>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>This is to test the page</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-primary col-md-6">button 1</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-success col-md-6">button 2</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-warning col-md-6">button 3</div> <br/><br/>
</div>
</div>
</div>
<hr style="margin-right:9cm"></hr>
</div>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>empty space between </p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-danger col-md-6">Button 4</div><br/><br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Create three containers, one for your content that doesn't exist on the form, one for the blur and one for the form content.
<div class="normal-content">
<p>Content that is on your page</div>
<div class="blur"></div>
<div class="form-content">
<p>Content that would exist on the form</p>
</div>
CSS
.blur{
position:absolute;
// We'll grow the blur box to be bigger than 100% so there isn't some weird effects that you can get with blur
width: 104%;
height: 104%;
top: -2%;
left: -2%;
filter: blur(5px);
}
I'm trying to open an alert type prompt when a link is clicked.
I have the following. Relevant code is near the bottom of the html.
$(document).ready function jqmAlert(title, message) {
// set up the 'alert' page..
$("#alert-title").html(title); // Insert the title
$("#alert-content").html(message); // Insert the dialog message
$(".ui-dialog").dialog("close"); // Ensure dialog behaviour
// Now open the page..
$.mobile.changePage("#alert", "pop", false, false);
function testAlert() {
jqmAlert("Hello", "A Hello Message");
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="lab2.js"></script>
<style type="text/css">.img {
display: block; margin-left: auto; margin-right: auto;
}
</style>
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<img src="img/logo.png" alt="Logo"
width="150" height="120"/>
<ul data-role="listview" data-inset="true">
<li>Link to Module Overview</li>
<li><a href="#lectures" data-transition=slidedown>Link to list of lectures</a></li>
<li><a href="#labs" data-transition=slideup>Link to list of labs</a></li>
<li><a href="#functions" data-transition=fade>Link to a list of functions</a></li>
</ul>
</div>
</div>
<div data-role="page" id="overview">
<div data-role="header">
<h1>Link to Module Overview</h1>
Back
</div>
<div data-role="content">
<h2>Welcome to Module Overview</h2>
<p id="">Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
</p>
<p>Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.</p>
</div>
</div>
<div data-role="page" id="lectures">
<div data-role="header">
<h1>Link to list of lectures</h1>
Back
</div>
<div data-role="content">
<ol>
<li>Introduction</li>
<li>Web-App Development</li>
<li>Using RSS data feeds</li>
</ol>
</div>
</div>
<div data-role="page" id="labs">
<div data-role="header">
<h1>Link to list of labs</h1>
Back
</div>
<div data-role="content">
<ol>
<li>HTML 5</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ol>
</div>
</div>
<div data-role="page" id="functions">
<div data-role="header">
<h1>Link to a list of functions</h1>
Back
</div>
<div data-role="content">
<ul>
<li>Test Alert</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ul>
<button onclick="testAlert()">Try it</button>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Two Footer</h4>
</div>
<div data-role="dialog" id="alert">
<div data-role="header" data-position="fixed">
<h3><div id="alert-title"></div></h3>
</div>
<div data-role="content">
<div id="alert-content"></div>
</div>
</div>
</body>
</html>
Try removing the inline script and use the jQM pageinit method to bind the click events that launch the dialog:
<ul>
<li>Test Alert
</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ul>
<button id="btnDialog">Try it</button>
$('#functions').on('pageinit', function (event) {
$("#btnDialog, #testAlert").on("click", function (e) {
testAlert();
});
});
Here is a working DEMO
I have a piece of code using jQuery to load content from an internal webpage onto a new page DOM after the user has selected a button from another page. The problem I got is no matter what option button I click the same result shows in the DOM. I was told to change the Var to .live but it hasn't made any difference. I cant really explain it more apart from some one looking at my code. What is the best way to deal with this?
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="../jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="../jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Options</li>
<li>results</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="options">
<div data-role="header">
<h1>Options</h1>
</div>
<div data-role="content">
<div id="page-wrap">
<div id="header">
<h1>Call a webpage in a DOM</h1>
</div>
<div id="load-div" class="functions">
<span>Value 1</span>
<input type="submit" value="300GB" id="load" />
<div id="load-div" class="functions">
<span>Value 2</span>
<input type="submit" value="500Gb" id="load2" />
</div>
results
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</div>
<div data-role="page" id="results">
<div data-role="header">
<h1>Results</h1>
</div>
<div data-role="content">
<div id="result" class="functions">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load.html";
$("#load").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load2.html";
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
Options
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Basically you overwrite every script you have here. Don't use loadUrl.
For #load:
$("#load").live("click",function(){
$('#result').html(ajax_load).load('load.html');
});
And for #load2:
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(`load2.html`);
});
Separate script tags are not independent. The code in one can interact with the code in another.
You have declared var ajax_load and loadUrl in both blocks. The ones in the second block overwrite those in the first. Either give them different names, or eliminate them and put the string values directly in your function.