Is there a way to dynamically change navbar text with jQuery

Is there a way to dynamically change navbar text with jQuery - javascript

<div id="page1" data-role="page">
<div data-role="header" data-position="fixed" align="center"><img src="img/VAWE-long-300x30-transparent.png" width="300" height="30" alt="" /></div>
<div data-role="content" style="margin:0; padding:0;">
<div id="wowslider-container1" style="padding-bottom:10px;">
<div class="ws_images">
<ul>
<li><img src="data1/images/catering_1.png" alt="" title="" id="wows1_0" /></li>
<li><img src="data1/images/rev._pamela_a._mann.png" alt="wowslider.com" title="" id="wows1_1" /></li>
<li><img src="data1/images/catering.png" alt="" title="" id="wows1_2" /></li>
</ul>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div style="padding-bottom:5px;">
<img src="img/Wedding in a Box.png" style="width:100%!important;">
</div>
<div style="padding-bottom:5px;">
<img src="img/Flutter My Shutter.png" style="width:100%!important;">
</div>
<div style="padding-bottom:5px;">
<img src="img/Brock's riverside.png" style="width:100%!important;">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="ui-nodisc-icon">
<ul>
<li>Home</li>
<li>Events</li>
<li>Vendors</li>
<li>Map</li>
<li>Profile</li>
</ul>
</div>
</div>
</div>
I'm wondering if there is a way I can change the "Vendors" menu item as shown above, and change the text and icon to something different using jQuery in a pageinit function?

This would find an a element with the string Vendors in it, replace that string. It then can remove the class for the icon and replace it with something else.
$("a:contains('Vendors')").text('Different String');
$("a:contains('Vendors')").removeClass('ui-icon-search').addClass('ui-icon-location');

Related

How to adjust padding of a menu using javascript according to screen size?

HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="javascript1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style1.css" />
</head>
<body>
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
</body>
</html>
javascript1.js
document.getElementByclassName("menu ul li").style.padding = "1.5vh 50px
1.5vh 50px";
CSS
.menu{
width:100%;
opacity:70%;
}
.menu ul{
width:100%;
display:inline;
}
.menu ul li{
font-size: x-large;
float: left;
list-style: none;
text-decoration: none;
color:yellow;
background-color:green;
padding:1.5vh 86px;
}
I have done the coding so when the page opens it should show menu shrunk from 86px to 50px, but it is showing 86px right and left padding. The Javascript code is not reflecting. My goal is to obtain a screen width constant and then changing the padding according to it using Javascript. But first as I'm new to Javascript I just wanted to test if my Javascript code is working or not and it's not reflecting.

This will not work, because you are mixing class name and tag name.
Please, use document.querySelector or document.querySelectorAll if you need to update all findings.
document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px")
UPDATE Here is a working demo for the provided markup. Everything works perfectly. The issue is here: <script type="text/javascript" src="javascript1.js"></script> You loads your JS before DOM. So when JS starts working, it can't find the expected DOM elements cause they are not yet loaded. To fix the issue, move JS to the bottom of the file.
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px");
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>

Visit https://www.w3schools.com/jsref/met_document_queryselector.asp.
Try with "document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";"

Page not working properly on jquery load function

I have this script.
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$("#image_results").load('/gallary1.php');
});
});
</script>
When I click the send button it should load gallary1.php into the image_results <Div> however it doesn't load it properly?
If I just use the include_once("gallary1.php"); command inside the <Div> then is displays properly. I'm guessing the Script is changing the code somehow but have no idea how.
Below is the php page I'm trying to load in.
$gallary="";
$gallary.='
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>';
echo $gallary;
Any help would be greatly appreciated. Also if there is any more info I need to provide please let me know.
I have found that if I load gallary1.php via include then the resulting html is:
<div class="content">
<div id="rg-gallery" class="rg-gallery"><div class="rg-view"></div>
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul style="width: 154px; display: block; margin-left: 0px;">
<li class="selected" style="margin-right: 3px; width: 69px;"><img src="http://www.fyom.16mb.com/images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></li>
<li style="margin-right: 3px; width: 69px;"><img src="http://www.fyom.16mb.com/images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></li>
</ul>
</div>
<div class="es-nav"><span class="es-nav-prev" style="display: none;">Previous</span><span class="es-nav-next" style="display: none;">Next</span></div></div>
</div>
<div class="rg-image-wrapper"> <div class="rg-image-nav"> Previous Image Next Image </div> <div class="rg-image"><img src="images/1.jpg"></div> <div class="rg-loading" style="display: none;"></div> <div class="rg-caption-wrapper"> <div class="rg-caption" style=""> <p>From off a hill whose concave womb reworded</p> </div> </div> </div></div>
</div>
However when is loaded via the script:
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
So something is not being picked up. As is it displaying what I echo out however when the page loaded properly is is inheriting additional formatting.

You can substitute using .html for php, as no dynamic data appears to be included at html echoed from php
gallary1.html
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
javascript
$(document).ready(function(){
$("#send").click(function(){
$("#image_results").load("gallary1.html");
});
});
plnkr http://plnkr.co/edit/VN5KUgrXpZtrkCAKr2I6?p=preview

Assuming you do get html loaded ( still not clear after numerous requests for clarification) ... I believe you have some sort of carousel plugin involved that you need to initialize on the new html in load callback
$("#send").click(function(){
$("#image_results").load("gallary1.html", function(){
// new html now exists, iniitlaize plugin now
$(this).myCarouselPlugin();
});
});

You can try this way:
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$.get('/gallary1.php', function(result) {
$("#image_results").html(result);
})
});
});
</script>`
And in your gallary1.php:
//echo your html here
Or the second way:
Your gallary1.php:
require_once('content.php');
then create another php file of content content.php:
//your html here, don't have to use echo

you must see if you call your gallary1.php directly in the browser, it's give you something..
You can look at the chmod ( 755 for example) of this file ..
if your file is in the same folde, you can put:
$("#image_results").load('gallary1.php');//without the /

js css slider tutorial issue

I've been trying my hand at a js slider tutorial and have been trying to get the slider to appear without having to click on one of the links (paris and milan etc).
So page opens, there's the slider.
I've tried having the div of the slider thumb container on the page without having
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
but it just shows up blank.
I'd really appreciate a nudge in the right direction.
Here's the tutorial for reference:link
Jsfiddle #pete fixed the fiddle
I'm sorry my fiddle doesn't work but my code is there. (First time using Jsfiddle and Stackoverflow so please be nice ;))
<div id="fp_gallery" class="fp_gallery">
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
<div id="fp_thumbContainer">
<div id="fp_thumbScroller">
<div class="container">
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fp_scrollWrapper" class="fp_scrollWrapper">
<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
<div id="slider" class="slider"></div>
<span id="fp_next_thumb" class="fp_next_thumb"></span>
</div>
<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">

Slideshow image blows up on page load

I just added a slider and carousel to my Volusion website homepage.
However, when I went to the page, the first carousel image would blow up to a huge size (original size is only 180 x 270) and flash twice. So I looked through the code and removed a line:
<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>
Because I thought maybe it's trying to load the javascript twice or something.
After I did this, the carousel image still blows up to a huge size on load, but only once.
Here is the page where it is happening on: http://www.wallsrepublic.com
All of the relevant code I have on my home page is below:
<script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>
For the main slider:
<link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>
For the problematic carousel:
<script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
<script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>
<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
<div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
<div class="amazingcarousel-list-container">
<ul class="amazingcarousel-list">
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK " ><img src="http://wallsrepublic.com/v/carousel/1.png" alt="GOLD DAMASK " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD DAMASK </div>
<div class="amazingcarousel-description">$159 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY " ><img src="http://wallsrepublic.com/v/carousel/2.png" alt="GREY OVERLAY " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GREY OVERLAY </div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png" alt="BLACK & WHITE DOGSTOOTH " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH </div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png" alt="BROWN FAWN " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BROWN FAWN </div>
<div class="amazingcarousel-description">$139 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png" alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">SERENITY SAND</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png" alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLOCK-STONE GREY</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png" alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png" alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">TIA GOLD</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png" alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
<div class="amazingcarousel-description">$399 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png" alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png" alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png" alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD VICTORIAN</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
</ul>
<div class="amazingcarousel-prev"></div>
<div class="amazingcarousel-next"></div>
</div>
<div class="amazingcarousel-nav"></div>
</div>
</div>
I had the javascript and css files in my template header before, but then the slideshows did not work so I had to move them to be directly on the home page.
Any help would be appreciated.

$(window).load(function() {
$(".flexslider").flexslider();
});
Try to remove those lines, you are calling the slider 2 times for the same class.

I don't think it's an issue with Flexslider that's causing this.
As far as I can tell, it is caused by the wallpaper swatch displaying at 100% width before the amazing carousel plugin kicks in and wraps the image to a smaller width.
Try adding this to your stylesheet
.amazingcarousel-item {
float: left;
width: 150px;
}
This will give the carousel item a width by default, which in turn causes the image inside it to be a smaller width.

Jquery mobile snap.js is not working if using data-prefetch="true"

Hi i am new for jquery mobile . I need to add snap.js to my app in order to archive slide menu function.Afer googling i decide to use snap.js. https://github.com/jakiestfu/Snap.js/
Please see my code below
page1.html
<a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' data-prefetch="true" href="page2.html">Sign in</a>
page2.html
<body>
<div data-role="page" data-title="Panel fixed positioning" id="landingPage" class="snap-content" >
<div data-role="header" data-position="fixed">
<div id="branding">Smart Realtor</div>
Menu
Logout
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<!-- coverstory -->
<div class="coverstory">
<img src="images/cover_story_img.jpg" alt="" class="scale-with-grid"/>
<div class="textbox">
<h1>Cover Story</h1>
<p>Latest pre-launch properties & new launch properties for sale in Kuala Lumpur & Selangor, Malaysia. Our site shows you new property launches for investment .....</p>
</div>
</div><!-- /coverstory -->
<div class="clear"></div>
<!-- main button -->
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-calendar ui-nodisc-icon" id="calendarBtn" ><br>Appointment<br><br>
</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-file-text-o ui-nodisc-icon" id="co-brokingBtn"><br>Co-broking<br>
Agreement</a>
</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="advertise_group.html" rel="external" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-comment ui-nodisc-icon" id="pagroupBtn" ><br>Property Advertisement<br>(Group)</a>
</div>
<div class="ui-block-b">
<br>Property Advertisement<br>(Agent)
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-title="fixed positioning" >
<div data-role="navbar" data-iconpos="top">
<ul>
<li>More Menu</li>
</ul>
</div>
</div>
</div>
<div id="menu" class="panel_bg snap-drawers">
<div class="snap-drawer snap-drawer-left">
<a href="profile.html"><div class="profile_wrapper">
<img src="images/profile_pic.jpg">
<h2>John Smith</h2>
<p>GCS Property Agent</p>
<p class="smalltxt">View Profiles</p>
</div> </a>
<div class="clear"></div>
<ul class="side_navi">
<li class="list-divider" >DISCOVER MORE</li>
<li><img src="css/png/bookmark.png" alt="" class="ui-li-icon ui-alt-icon"/>News & Noteworthy</li>
<li><img src="css/png/book.png" alt="" class="ui-li-icon ui-alt-icon"/>Customer Contact Lisiting</li>
<li><img src="css/png/laptop.png" alt="" class="ui-li-icon ui-alt-icon"/>Team Leader Monitoring</li>
<li><img src="css/png/home.png" alt="" class="ui-li-icon ui-alt-icon"/>Property Listing</li>
<li><img src="css/png/user.png" alt="" class="ui-li-icon ui-alt-icon"/>Tenant Listing</li>
<li><img src="css/png/calendar.png" alt="" class="ui-li-icon ui-alt-icon"/>Appointment Management</li>
<li><img src="css/png/usd.png" alt="" class="ui-li-icon ui-alt-icon"/>Home Loan Calculator</li>
<li class="list-divider" >Miscellaneous </li>
<li><img src="css/png/gears.png" alt="" class="ui-li-icon ui-alt-icon"/>Setting</li>
<li><img src="css/png/envelope.png" alt="" class="ui-li-icon ui-alt-icon"/>Feed Back</li>
</ul>
</div><!-- /panel -->
</div>
<script type="text/javascript" src="js/snap.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('landingPage'),
disable: 'right'
});
</script>
</body>
Everything if working fine if i change the hyperlink to use rel="external"
<a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' rel="external" href="page2.html">Sign in</a>
Any solution if i want to use data-perfetch="true" inside my hperlink?

Develop Reference

JavaScript is the programming language of the Web.

Is there a way to dynamically change navbar text with jQuery - javascript

This would find an a element with the string Vendors in it, replace that string. It then can remove the class for the icon and replace it with something else. $("a:contains('Vendors')").text('Different String'); $("a:contains('Vendors')").removeClass('ui-icon-search').addClass('ui-icon-location');

Related

How to adjust padding of a menu using javascript according to screen size?

Page not working properly on jquery load function

js css slider tutorial issue

Slideshow image blows up on page load

Jquery mobile snap.js is not working if using data-prefetch="true"

Categories

Resources