I'm trying to implement an Orbit slider into my page. This works fine with just images and regular bullets, but when I add deeplinks to this, the # href of each deeplink is triggered and i'm sent back to the top of the page. I don't even know if the data-orbit-link is working or not.
<div class="row">
<ul id="featuredCom" data-orbit>
<li data-orbit-slide="image-1">
<img src="images/featureimages/slide2.jpg" />
</li>
<li data-orbit-slide="image-2">
<img src="images/featureimages/slide1.jpg" />
</li>
<li data-orbit-slide="image-3">
<img src="images/featureimages/slide3.jpg" />
</li>
</ul>
</div>
<div class="row">
<ul class="inline-list">
<li>Image One</li>
<li>Image Two</li>
<li>Goto Three 3</li>
</ul>
</div>
<script>
$(window).load(function(){
$('#featuredCom').orbit({
});
});
</script>
I haven't altered anything in the orbit.js file so I can't see what would be causing this. Read the Foundation 4 orbit docs back and forth to see if i'm missing anything, but even when copy their code, the deeplinks behave the same way. Any help would be appreciated!
You can use javascript: void(0);
Image One
And use
$(document).foundation();
Related
I'm new to coding, but made this site a few years ago and it stopped working a month ago. No changes were made. Please help. I tested the site by putting everything in DW and it worked. So I am not sure why on the web it wont replicate.
I did try all browsers and java is enabled. This is supposed to be a rotating picture wheel from coding jack. Like I said before it did work for the past 3 years. It stopped working a month or so ago.
I have been trying everything on my end to figure it out, but I am at a loss. Any help will be appreciated, but please understand I am not an expert. I did my research and will respond to you once I have tried everything you guide me with.
Thank you!
results on webpage
<div class="zoom-gallery" id="zoom-instance-1">
<img src="images/showcase/assets/preloader.gif" class="preloader" width="55" height="18" alt="preloader" />
<ul>
<li title="images/showcase/pastor1.jpg">
<!-- "class" options are "align-left" and "align-right", these are the text-align options -->
<!-- "title" attribute is optional. If added it will link the entire slide to the url entered -->
<ul class="align-left" title="http://codecanyon.net/user/CodingJack">
</ul>
</li>
<li title="images/showcase/child.jpg">
<ul class="align-left">
</ul>
</li>
<li title="images/showcase/prayer.jpg">
<ul class="align-left">
</ul>
<li title="images/showcase/praise.jpg">
<ul class="align-left">
</ul>
<ul class="align-left">
</ul>
</li>
</ul>
<noscript>
<div id="noscript"><img src="images/showcase/pastor1.jpg" alt="jQuery Banner Rotator" width="400" height="262" align="middle" />
</div>
</noscript>
</div>
I am using the code from - jsfiddle
And I modified the code similar to -
<body>
<ul>
<li onclick="toggle('Items')"><b>Items</b></li>
<ul id="Items" style="display:none">
<!-- skeleton start -->
<li onclick="toggle('Item1')"><b>Item1</b></li>
<ul id="Item1" style="display:none">
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<li onclick="toggle('Items5')"><b>Items5</b></li>
<ul id="Items5" style="display:none">
<li>Item6</li>
<li>Item7</li>
</ul>
<li onclick="toggle('Items8')"><b>Items8</b></li>
<ul id="Items8" style="display:none">
<li onclick="toggle('Items9')"><b>Items9</b></li>
<ul id="Items9" style="display:none">
<li>Items10</li>
</ul>
<li onclick="toggle('Items11')"><b>Items11</b></li>
<ul id="Items11" style="display:none">
<li>Items12</li>
</ul>
<li>Items13/li>
</ul>
</ul>
</ul>
<ul>
<li onclick="toggle('newitems')"><b>Items-New</b></li>
<ul id="newitems" style="display:none">
<!-- skeleton start -->
<li onclick="toggle('NewItem1')"><b>New Item1</b></li>
<ul id="NewItem1" style="display:none">
<li>NewItem2</li>
<li>NewItem3</li>
<li>NewItem4</li>
</ul>
</ul>
</ul>
</body>
But the problem is that at times it works and at times, it doesn't. I am able to expand collapse Items and sub items properly while sometimes it doesn't respond. I have no clue as why is it not working every time. At times, New Items doesn't expand and at times it does. Any help is much appreciated.
please visit here , click on Java, Environment Setup doesn't seem to work all the time. If you click on Introduction to Java, it starts working.
this element in your page cover your Environment Setup element
<div class="vbox wb_container" id="wb_footer"> </div>
I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
I want to Highlight the Menu Dynamically in Html Pages using Js.
For Example
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES
<ul>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</div>
I given Like this. But its not working
<script>
$(document).ready(function() {
$("#cssmenu ul li").click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
});
For this i would like activate the Menu when it is Clicked Using Js. Please Help me.
Thanks in Advance.
I have a demo for you here: http://jsfiddle.net/ttaN2/4/
I have altered the HTML so that there are correct open and close tags:
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES</li>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</ul>
</div>
I believe this is what you intended. I am not sure what you intended to happen when you click on another sub menu though. I'll try to help you out if you can describe exactly what you intend to happen.
I have been trying to create a page using jQuery mobile.
I am trying to create a navigation menu using lists and collapsibles.
The way the navigation works is there are links and there are collections of links.
Each collection of links is put into a collapsible list.
Here is the page:
<div data-role="page">
<div data-role="content">
<ul data-role="listview">
<li> Link 1
</li>
<li> Link 3
</li>
</ul>
<div data-role="collapsible" data-inset="false">
<h3>Links inside</h3>
<ul data-role="listview">
<li>link 5
</li>
<li>link 6
</li>
</ul>
</div>
<ul data-role="listview">
<li> Link 3
</li>
<li> Link 4
</li>
</ul>
</div>
The problem is that putting anything after a listview or collapsible seems to have some issue with padding and is slightly pushed up into the previous element, covering some of it.
I tried using <br/> here
and clear:both here
If possible I would like to use only one listview instead of mixing listviews and collapsible but that did not work for me.