I'm really new at this and I would like to create collapsible menus using jQuery Mobile. I went over to their site and found this resource:
http://demos.jquerymobile.com/1.4.0/collapsible/
So, I made a test page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="scripts/jquery-1.11.3.js"></script>
<script src="scripts/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div id="div2014" data-role="collapsible">
<h3>2014</h3>
<p>
Q1<br/>
Q2<br/>
Q3<br/>
Q4
</p>
</div>
</body>
</html>
but I can't seem to get it to work. All that gets displayed is this:
Please help! I'm really new at this, so I'm not sure if I'm doing things right :(
You need to include the jquery.mobile CSS file as well.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
make use of jQuery's slideToggle() function on click.
See this pen and click 2014, the menu will be displayed and collapsed on clicking it again
Related
I am using pjax in my application. Recently I added livewire and I don't know how to make them work together. My problem:
I have a grid with products and with infinity scroll on a button click, which calls specific URL for data.
<div>
<button wire:click="loadMore" class="bg-blue-500">Show more</button>
</div>
Everything works perfectly unit I click on some filters (for example "sort by desc").
My container reloads (with pjax) and when I click on "Show more" button, it doesn't call anything.
Here is my main layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
#livewireStyles
</head>
<body>
<div id="pjax-container">
<!-- THIS CONTENT RELOADS -->
<!-- Here I have foreach with data and button "Show more" -->
</div>
</body>
#livewireScripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
$(document).pjax("a", '#pjax-container');
</script>
</html>
I have no idea where could be a problem. Thanks for your help.
I've finally found a solution.
You have to rescan all livewire components after pjax end with this command:
window.livewire.rescan()
Try adding the script jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I am trying to add a simple carousel to my site. After doing a little research I found owl.carousel.js, I like the layout they use and it seems to be what I'm looking for.
Keep in mind I am new at all this. :)
My question is after I have downloaded the file and add the links to my html how do I make it work? Also I am not sure if I have to add the JS in the html or separate like I have it. On the owl site it just says call the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a link href="main.css" rel="stylsheet" type="text/css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title></title>
</head>
<body>
<div class="owl-carousel">
<div> <img src="images/images-1.jpeg"> </div>
<div> <img src="images/images-2.jpeg"> </div>
<div> <img src="images/images-3.jpeg"> </div>
<div> <img src="images/images.jpeg"> </div>
<div> <img src="images/shutterstock_204805573.jpg"> </div>
<div> <img src="images/shutterstock_221107753.jpg"> </div>
<div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
</div>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
Looking at your html, it should work. Just add the snippet (that you mentioned first) right after you include owl carousel js file. So, the final should look like:
...
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</body>
</html>
First of all just for starters, Your CSS link is set wrong, remove the hyperlink tag as link is its own tag... I think I see it, from what I see its the only option... PS You did lack a little on showing us your file locations and code...
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Running it from the Javascript console that inspecting Chrome exposes is the best way to test IMO. Running that script is basically what you're doing when you load it via JQuery, here you're just doing it manually. If the site has a CDN, I say try it with that first, then if it's working you can download it and get it working locally.
I have this piece of code:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
And something is completely wrong with tooltip - it should appear with styles from jQuery UI but it doesn't, and is wrong placed - it appears, even for button with bigger margin, on the left side of screen (and as I said without any styling, it looks like plain text), even with ,,track" property set to ,,true" it doesn't follow cursor exactly, but still appears on the left side of page and move a little when I move cursor.
I think this is pretty simple example (that code is simplified problem that occurred at my work) and I can't see what am I doing wrong. I will be happy if anybody helps me - thank you in advance.
P.S. Snippet, this is exactly the same behavior as I got in my browser:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
You aren't linking to the css file correctly.
Replace:
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
With:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
I'm new to jQuery and jQuery mobile. I'm trying to understand how to execute a function when a button is clicked. I've tried the methods I've seen in tutorials, but it isn't working for me. Here's my code. I get the 'document is ready' alert, but don't get an alert when the button is clicked. I've also tried it with the .click() outside of the ready function. If anyone can find what I'm doing wrong, it will be greatly appreciated. Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function() {
alert('document is ready');
$('#testButton').click(function() {
alert('testButton has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Test Button
</div>
</div>
</body>
</html>
Remove the # from the id value in your a tag. # is a jQuery selecter which species its an ID. Change this line
Test Button
TO:
Test Button
Replace:
Test Button
with:
Test Button
The id shouldn't have the "#".
Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});