I am referencing the gallery selector options that auto cycle in the relative content. This site is built in full HTML hard code so feel free to view source.
Everything is completely operational on local side. As soon as I upload to godaddy and test, the functionality is not working: https://www.steam-green.com/gallery.html
Here is what is not working:
<div class="collapse navbar-collapse latest--project" id="navbarfiltr">
<ul class="simplefilter">
<li class="active" data-filter="*">All</li>
<li data-filter=".carpet-cleaning">Carpet & Rug Cleaning</li>
<li data-filter=".upholstery-cleaning">Upholstery Cleaning</li>
<li data-filter=".tile-and-grout">Tile & Grout</li>
<li data-filter=".hardwoods">Hardwoods</li>
<br><br>
<li data-filter=".water-damage-restoration">Water Damage Restoration</li>
<li data-filter=".mold">Mold Removal</li>
<li data-filter=".rug">Area Rug</li>
</ul>
</div>
I am seeing you are using isotope jquery library.
I saw your custom.js and I don't see where you are initilizing this plugin for that specific menu nor your html.
Please refer again to documentation https://isotope.metafizzy.co/
Its possible that you didn't update your custom.js file in production, please check.
Related
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I am currently helping to solve a toggle problem but there's no error showing in console and I don't know where to start looking.
There are two tabs which can be toggled between each other. Let's say toggle tabs are pay / method. Default page is showing pay and when method tab is clicked, method tab shows perfectly but when clicking pay again the tab (CSS) worked fine that we can see pay tab is active but contents of pay doesn't show. The contents are still method.
Currently using bootstrap and of course the script included jquery already.
The html code is
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a data-toggle="tab" role="tab" aria-controls="home" href="#home" aria-expanded="true">Pay</a>
<li class="" role="presentation">
<a data-toggle="tab" role="tab" aria-controls="method" href="#method" aria-expanded="false">method</a>
</ul>
I am not sure what else to show since the scripts is form bootstrap, it'll be HUGE.
P.S. as said, even though the contents don't show but by clicking each other, I can still see the class is set to active and aria-expanded is set to true to whichever tab I clicked. (Also, I am wondering if I couldn't find out what is really causing this since there are no errors and so on, am I able to write a new script and include the script below the bootstrap script? That should override and work right?)
Edit:
I have tried adding jquery and so I can select the current element but somehow it only worked a bit.
I added another class into the html
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active payment-tabs">pay</li>
<li role="presentation" class="payment-tabs">method</li>
</ul>
I have script like this
$("ul.nav.nav-tabs").on('click', $(".payment-tabs.active"), function () {
console.log($(".payment-tabs.active"));
});
I tried console.log lots ways to find the current element or at least the a element but when I console.log I realized when I click method, the console.log does give the element of method but when I click pay the first time what I got from console.log is still the method element even though pay already has active class added. If I click the pay again then I will finally get the pay element. I might have an idea of the reason but I just have no idea how I can solve this.
Can someone please give me a hand please?
Thanks in advance.
Make sure you include the scripts needed to run the code. See the running demo here
Basically, you just need to call 3 main sources.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The Tab
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#payment" data-toggle="tab">Payment</a></li>
<li><a data-target="#method" data-toggle="tab">Method</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="payment">This is a payment area</div>
<div class="tab-pane" id="method">This is a method.</div>
</div>
</div>
I've been trying out solutions to similar cases but none of them work so far.
Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.
Here's from the index.html file:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="current">Home</li>
<li>About</li>
<li class="support" >Support</li>
<li >Contact</li>
</ul>
</div>
and here's from support.html:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="current">Support</li>
<li >Contact</li>
</ul>
</div>
This is one of the solutions that I tried with no results:
https://stackoverflow.com/a/11539359
JS is not my strong suit, thank you so much for your help!
There were lot of issues with the way you are loading scripts for example
$(document).ready(function() {
$('#ind').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
you are calling this before the jquery is loaded so it gives $ is undefined error, so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions
I have included the fix in the following file HTML Zip files, you will find all JS moved to end. Its working fine for me now
One more thing make your contact height same as other container or remove extra margin/padding from Physicians section
I want to refresh a mobile web page on-swipe. The html code is very basic, and just need the necessary jquery/javascript to get the swipe to reload the current page.
Here is the HTML: http://jsfiddle.net/yKpLJ/1/ I am pulling in jquery and jquery ui as well, but don't know how to move forward.
<div id="fact-footer">
<ul>
<li class="share facebook">
Share It
</li>
<li class="share twitter">
Tweet It
</li>
<li class="refresh">
Refresh Fact
</li>
<li class="logo">
Logo
</li>
</ul>
</div>
Thanks!
Check out HammerJS http://eightmedia.github.io/hammer.js/
Include the script on your page and then do something like this:
var element = $('body');
Hammer(element).on("swipeleft", function() {
location.reload();
});
I've used the jQuery Mobile ThemeRoller to create a theme for a new mobile website I'm working on. In general the theme works well, but the list-divider that's displayed in the ThemeRoller isn't used in my application.
Here's a screenshot illustrating the problem:
ThemeRoller problem http://img.skitch.com/20120416-8fbfbu41abrci1ym8uthatfi4e.png
The relevant HTML for the page in question is:
<div id="schedule" data-role="page" data-theme="a">
<div data-role="content" data-theme="a">
<ul data-role="listview">
<li data-role="list-divider">8:00 am</li>
<li>Welcome & Keynote</li>
<li data-role="list-divider">9:00 am</li>
<li>Session title displayed here</li>
</ul>
</div>
</div>
I've even tried adding a few things I found in the ThemeRoller markup:
<li data-role="list-divider" data-swatch="a" class="ui-bar-a" data-form="ui-bar-a">8:00 am</li>
This has no effect. No matter what I do, it seems to set the class to ui-bar-b. I can live-edit the HTML in Chrome and change ui-bar-b to ui-bar-a and it looks exactly how I would expect.
Am I doing something wrong? Is this maybe a jqm bug?
Using jqm 1.1.0 and jquery 1.7.0.
You can add the data-dividertheme="a" attribute to your data-role="listview" element to force a specific swatch to be used for the divider list-items. By default, if your listview is set to theme a, then the dividers will be set to theme b, so you have to force list-dividers to be the correct theme or you have to build your themes with this in mind.
<ul data-role="listview" data-dividertheme="a">
<li data-role="list-divider">8:00 am</li>
<li>Welcome & Keynote</li>
<li data-role="list-divider">9:00 am</li>
<li>Session title displayed here</li>
</ul>
Here is a demo: http://jsfiddle.net/8aZpQ/ (this demo forces theme e for dividers)
And here is the documentation for this: http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html