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.
Related
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>
Say I have a menu that goes 4 to 5 levels deep. In most cases, selecting the menu will open up the same. Here is some html:
<div class="container">
<div class="trigger">Click Here</div>
<div class="menu">
<ul>
<li>
Main
<ul>
<li>
First
<ul>
<li>
Third
<ul>
<li>
Five
</li>
<li>
Six
</li>
</ul>
</li>
<li>
Fourth
</li>
</ul>
</li>
<li>
Second
</li>
</ul>
</ul>
</div>
</div>
How can I make it so that if you click on "Third", and you go to that page, that when you get to that page and click on the menu again, that it will open up showing the "Third" title at the top with its children instead of opening it up like it would normally do?
If the page is loaded (after kicking a link)
you need to indicate first which page has been loaded for example: blah3.aspx or blah4.aspx
Then in Order to rearange the list, u must get the html content of the list-item that should be shown on top menu.
<div class="menu">
<ul>
<li>
Main
<ul>
<li>
First
<ul>
<li id="page3">
Third
<ul>
<li>
Five
</li>
<li>
Six
</li>
</ul>
</li>
<li>
Fourth
</li>
</ul>
</li>
<li>
Second
</li>
</ul>
</ul>
</div>
Example here if page 3 has been loaded:
Get inner html content:
var treeStructure = $("#page3").html;
Remove the list-item from list with the jQuery remove method:
$("#page3").remove();
Add saved content to the beginning of the list with the jQuery prepend method:
$(".menu ul").prepend("<li>" + treeStructure + "</li>");
Like the title says, I have a sidebar menu that I'm trying to get to completely slide up and out of sight when one of the menu items, blog, is clicked. Similar to this jsfiddle I found (preferrably without js simply bc I hardly know it, but if that's the only way no big): fiddle ; except my menu is already open and you will be clicking an item inside the menu to slide it up. I'm trying to get the menu to slide up slowly.
The menu looks like this:
Logo
home
blog
instagram
about
store
portfolio
contact
Everything I try changes the whole layout of the sidebar, which I don't want. Here's some of my code:
<div id="sidebar">
<div id="navigation">
<div id="logo">
<img src="Logos/headerlogo.jpg" width="208" height="80" longdesc="Logos/headerlogo.jpg">
</div>
<hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
<div class="menu">
<ul class="first" >
<li> Home</li>
<li> Blog</li>
<li> Instagram</li>
<li> About</li>
<li> Store</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</div>
I have some other code in there like a search bar, etc. but this is basically what I'm trying to get to roll up slowly when 'blog' is clicked. Any guidance is appreciated!
easy way to do it is use jquery, i think it impossible just with html and css, take a look with http://api.jquery.com/slideup/
You can get this effect by using jQuery's .animate and animating the position of your elements. In your case, you could do something like this, using a margin to create the sliding up animation. Please note that I added a class called blog to the blog link.
$('.first .blog').click(function(){
$('#sidebar').animate({
"marginTop": "-=500px" //animate margin to create slide up animation
}, 1000); //duration of animation, in milliseconds
});
Check out this JSFiddle.
You could do it like this.
FIDDLE
HTML:
<div id="sidebar">
<div id="navigation">
<div id="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" width="208" height="80" longdesc="Logos/headerlogo.jpg">
</div>
<hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
<div class="menu">
<div class="menu">
<ul class="first">
<li> Home
</li>
<li> <a class="blog" href="#" title="" runat="server">Blog</a>
</li>
<li> Instagram
</li>
<li> About
</li>
<li> Store
</li>
<li> Portfolio
</li>
<li> Contact
</li>
</ul>
</div>
Javascript:
$(".blog").on("click", function () {
var slide = $(this).closest(".first");
$(slide).slideToggle("slow");
});
I have a navigation on my site where the last link opens a modal.
Scrollspy is working fine but I don't want it to highlight the last element that opens the modal in any case.
Is there any way to do so?
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
Kontakt
</li>
</ul>
</nav>
I've found a solution without adding extra markup, but this is not so beautiful.
The scrollspy highlights the menu item only when the <a> contains the href attribute (at least, in Bootstrap 3.x). So if there's no href, the menu item will never be highlighted.
I've found an extension for the Bootstrap's scrollspy JS to exclude some items ID here, but this is for the 2.x version.
A solution for your problem may be :
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
<a data-toggle="modal" data-target="#contact">Kontakt</a> <!-- See http://getbootstrap.com/javascript/#modals-usage -->
</li>
</ul>
</nav>
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();