how to change the default load ajax loader gif in jquery mobile - javascript

I have already seen the docs for jquery mobile but couldn't understand how to integrate it on my mobile website. The docs are here at
http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html
Actually the gif image doesn't animate on 2.x android devices so I am thinking about making a text only kind of pre loading widget.
I tried changing it via css like this
.ui-icon-loading {
background: url(themes/images/custom-ajax-loader.gif);
}
but the new imag doesn't scale properly and the old background is still visible.
I am a complete noob with javascript.can someone plz help me with this?

You are mentioning the jQM 1.2 Alpha Docs so my answer is based in this jQM version.
Below you can find 2 options to change the default loader image.
Solution 1
As stated in the jQM 1.2 Alpha Docs:
When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit. Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit event:
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
Below you can find a working example in which you can fully customize the loader in the html prototype option.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.loading('show');
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Solution 2
Override the default CSS styles used to depict the page loader.
EDITED
For jQM 1.1.1 version there are the following configurable options:
loadingMessage string, default: "loading"
Set the text that appears when a page is loading. If set to false, the message will not appear at all.
loadingMessageTextVisible boolean, default: false
Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.
loadingMessageTheme string, default: "a"
The theme that the loading message box uses when text is visible.
Code example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loadingMessageTheme = 'e';
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "test";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.showPageLoadingMsg();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Furthermore you could try to override the default CSS used to style the jQM loader. More specifically you could modify or override the styles in the section loading screen and the style in the section loading icon which are used to depict the page loader.
You will find here the CSS used in jQM 1.1.1.
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }

Related

Why won't slideDown() function work in JQuery event handler?

I have just started trying to learn JQuery event handling, and cannot seem to understand why this is happening. I read through the section on event handling in the documentation, but I am still having trouble manipulating objects on the page from the event handler. I get the basic idea of event bubbling up through the DOM, and have been successful i attaching primitive functions that operate on the specific object to which they are attached, or which can launch an alert. Below is the HTML, CSS, and Javascript, and the trouble is specifically with this handler:
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function()
{
alert("Why doesn't it work?");
});
Here is the full code
$(document).ready(function() {
$("#leftButton").click(function() {
alert("Handle for left button click()");
$(this).hide();
$("#picOne").slideDown(3000, linear, function() {
alert("Why doesn't it work?");
});
});
$("#blockRed").click(function() {
$(this).hide();
});
$("#blockBlue").click(function() {
alert("Handle for blue block");
});
$("#blockGreen").click(function() {
alert("Handle for green block");
});
$("#picOne").click(function() {
alert("Handle for right arrow");
});
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function() {
alert("Why doesn't it work?");
});
});
});
#picOne {
float: right;
margin-right: 0px;
}
#picTwo {
float: left;
}
.friendImg {
width: 250px;
height: 100px;
border: #000;
display: inline-block;
margin-right: auto;
margin-left: auto;
margin-bottom: 2%;
text-align: center;
padding-left: 25%;
}
.lightRedBox {
background-color: rgb(23, 0, 0);
width: 800px;
height: 400px;
border: #09C;
border-width: thin;
margin-top: 10%;
margin-left: 5%;
}
#blackBox {
background: black;
height: 400px;
width: 100%;
}
#blockBlue {
background: blue;
width: 75px;
height: 75px;
}
#blockRed {
background: red;
width: 75px;
height: 75px;
}
#blockGreen {
background: green;
width: 75px;
height: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bonsai Exquisite - Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/galleryCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="blackBox">
<div class="lightRedBox" id="firstBox">
<h4 class="boxTitle">Bonsai </h4>
<img src="images/coolFilteBonsai.jpg" alt="bonsai image" id="leftFriendImage" class="friendImg">
<p class="boxBlurb">This associatin has been assisting local bonsai associations for over fifty years, and has contributed to the larger pattern of bonsai growth globally. In the past five years, the association has been dealing with blah blah blsah blah.....</p>
<button type="button" id="leftButton" class="leftClassButton" name='leftClassName' onMouseOver="leftBotWinShine()" onMouseOut="botWinShineout()" onClick="closeLeftBox()">Close Me!</button>
</div>
</div>
<div id="vanishing">
<div id="blockBlue">
</div>
<div id="blockRed">
</div>
<div id="blockGreen">
</div>
</div>
<img src="images/images/rightPage.png" id="picOne">
<img src="images/images/leftPage.png" id="picTwo">
</body>
</html>
Thanks for your time and help, it is greatly appreciated.
slideDown() used for animate in some content which is not visible. Here your content is already visible so slideDown() seems not working although it is working but cannot be seen. To get animation you need to hide the element by changing css display:none or else add .hide() method before slideDown() like
$("#picTwo").click(function() {
$("#picOne").hide().slideDown(3000, "linear", function() {
alert("Why doesn't it work?");
});
});

How to let "cross" pop up with ::after a different section

I'm trying to make a cross change to minus and pop up some text.
I have a example but I don't understand how it works with ::after.
It is made with ::after but I don't understand how to use it. Or is it made with a JavaScript?
My code
h2 {
text-transform: uppercase;
letter-spacing: 3px;
font-family: ProximaNovaT-Thin;
font-weight: 400;
font-size: 34px;
line-height: 44px;
}
h5 {
cursor: pointer;
line-height: 24px;
border-top: 1px solid #777;
border-bottom: 1px solid #777;
position: relative;
padding: 20px 75px 20px 0;
}
h5::before {
content: "";
position: absolute;
background: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/plus-icon1.png) scroll no-repeat center center;
background-size: auto;
top: 0;
right: 0;
width: 70px;
height: 100%;
background-size: 45px 45px;
}
.opencont h5::after {
content: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/minus.png) scroll no-repeat center center !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- COSTUM STYLE.CSS -->
<link href="Classes/Model/Contact.css" rel="stylesheet" type="text/css"/>
<title>ThemeBuild B.V.B.A</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 style="padding-top: 50px; padding-bottom: 40px; font-weight: 400; font-family: ProximaNovaT-Thin;">Contact gegevens</h2>
<div class="locatie-dropdown">
<div class="topc text-left">
<h5 style="font-size: 16px;">WOODSTOCK LOCATIONS</h5>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- BOOTSTRAP SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</html>
I'll answer what I can with the information you've given.
First, ::after is a pseudo element. You can read about it here: https://www.w3schools.com/cssref/sel_after.asp.
This means that the "cross" (+) and (-) are positioned after a selected element (in this case h5).
Second, this functionality is most likely accomplished with some javascript. It would involve using an event listener (or in-line javascript onClick) to catch the onClick event of an element (in this case likely the parent of the h5 or the h5 itself), and change a css property that says whether the content is expanded (shown) or not. The content to be shown would be toggled on/off probably using display:none or visibility:hidden. The "cross" (+) or (-) would be changed appropriately within the same onClick event.
In pseudo-code:
If clicked, and content is hidden, then show content and change + to -.
If clicked, and content is shown, then hide content and change - to +.

Load external Navigation bar into multiple html pages

I have created a html page containing only the navgation bar and the actions to take on it.
I want to load this html page inside a div with an id of nav
However up to recently I used 3 things myself:
include_once(); but this is php i dont want to change an html page
to a php page only for one line of code
java script load function (however iv read this and its not recommended )
jQuery get function , which worked with simple html file but since in this file i have included the css and java script inside only one element will show which is the button.
Any solution or suggestion?
nav.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nav</title>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
.Layer {
height: 100%;
width: 0;
z-index: 1;
position: fixed;
left: 0;
top: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
display: flex;
flex-direction: row-reverse;
}
.Content {
position: relative;
margin: auto;
}
.Content a {
margin: auto;
text-decoration: none;
font-size: 36px;
transition: 0.3s
}
.Content a:hover, .Content a:focus {
color: #f1f1f1;
}
.Layer .closebtn {
font-size: 60px;
}
</style>
</head>
<body>
<div id="myNav" class="Layer">
<a href="javascript:void(0)" class="closebtn" onClick="closeNav()">
<i class="fa fa-window-close" aria-hidden="true"></i>
</a>
<nav class="Content">
<ul>
<li>Home</li>
<li>Download</li>
<li>About this</li>
</ul>
</nav>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
jquery :
// JavaScript Document
window.onload = function()
{
"use strict";
//$("#nav").load("nav.html");
$.get("navbar.html",function(data)
{
document.getElementById("nav").innerHTML=data;
});
};
The following code works for me:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="include"></div>
<script>
window.onload = function(){
$.get("inc.html", function(data){
$("#include").html(data);
})
}
</script>
</body>
</html>
inc.html:
<p>This was included using jQuery.</p>
I know you said you have checked names, but I see nav.html in your question, and don't see the navbar.html that you are trying to include. I have a strong feeling you are misnaming something somewhere.

Cylcle2 no cycle-pager shows up

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
This problem causes doctype Use <!doctype html>
try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>
Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>
Try adding "height:40px;" to the .cycle-pager class.

Resize all children elements in iframe [duplicate]

I have this code and it works fine:
Head
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
Body
<div id="test" style="border: .1em solid black;">
</div>
However when I change my "div" into "iframe" I can't resize it anymore.
Body
<iframe id="test" style="border: .1em solid black;">
</iframe>
Found redsquare's demo a bit wonky when moving the mouse more than a few pixels at a time. I've applied a couple modifications that help make resizing a lot smoother:
<html>
<head>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 75px solid #EFEFEF; margin: -75px; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
helper: "ui-resizable-helper"
});
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<iframe src="http://pastebin.me/f9ed9b9d36d17a7987e9cb670e01f0e2" class="ui-widget-content" frameborder="no" id="test" width="100%" height="100%" />
</div>
<div>
</body>
</html>
The weirdness of resizing seems to happen because mousemove events don't bubble up from within the iframe. Using a resize handler and a large border in the handler CSS minimizes the effect caused by the iframe as long as the browser can keep up with the mousemove events.
Below Code Work for me in smooth way.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#iframe {
width: 100%;
height: 100%;
border: none;
background: #eee ;
z-index: 1;
}
#resizable {
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #ccc;
z-index: 9;
}
</style>
<script>
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
</script>
</head>
<body>
<div id="resizable">
<iframe src="test.html" id="iframe">
</div>
</body>
</html>
I think this might be what you are looking for: Place the content of whatever is in your iframe in a div. For this example I will give the div an id of "container".
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
I landed up here for searchin Resize iframe, But this question is about resizing using Jquery UI plugin, I am just adding a answer so it might be helpful for someone in future who falls into this page searching to resize iframe.
This can be done using only CSS
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
Also all the major browsers have good support. Check out this link and also about the browser support

Categories