I have used "enscroll" js scroll bar in my page. http://enscrollplugin.com/#demos
<div id="enscroll_name">
<ul>
<li id="p1">product1</li>
<li id="p2">product2</li>
<li id="p3">product3</li>
<li id="p4">product4</li>
<li id="p5">product5</li>
</ul>
</div>
On Page load the product3 need to be in the visible area. I used <a name="p3"></a> for this. But in query how to achieve this? In html we used anchor name tag like <a name="p3"></a>. But in this script how to achieve this?
You can use .scrollTop() jquery function to visible whatever the area that you want inside the div.
Try like this..
$('#yourdiv').scrollTop($("p[name='p2']").height());
Check the sample fiddle
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 new to HTML and CSS, but I have an idea on JavaScript.
Previously, I made a horizontal switch in the following way using flat-ui from flat-ui
Now I want to implement vertical switch in the following way
How can I make it?
something like this?
<ul class="body">
<li >
<a>switch #1</a>
</li>
<li class="active">
<a>switch #2</a>
</li>
</ul>
See the css and animation in link
jsfiddle.net/uNFWX/
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();
});
Lets say you have a unordered list with just icons (here only one):
<ul>
<li class="in-row"><a href="#" id="meddelanden" data-content="Content here..."
data-title="Meddelanden" data-toggle="clickover" data-placement="left">
<i class="icon-globe"></i></a>
</li>
</ul>
With these included files to your html document:
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script>
$('#meddelanden').popover('animate');
</script>
It does appear fine and the content is shown when i press the icon, but i would like to have some links and breaks and stuff in that popover container. How can i do this?
You don't need to use javascript for that. You can use data-html and data-content in order to achieve that.
Try setting data-html="true" and insert escaped html into your data-content attribute.
Just like this:
<ul>
<li class="in-row"><a href="#" id="meddelanden" data-content="<hr>Sample html<br>"
data-title="Meddelanden" data-toggle="clickover" data-placement="left" data-html="true">
<i class="icon-globe"></i></a>
</li>
</ul>
Some text editors provide built-in HTML Escape tools. If your editor doesn't, you can use an online tool like this one:
http://www.htmlescape.net/htmlescape_tool.html
Update:
Another approach is to add your markup to the html document itself (as a hidden container)
and create the tooltip using javascript:
HTML
<div id="tooltip-content" style="display: none;">
<p>Tooltip content goes here</p>
</div>
Javascript
$('#element').tooltip({
html: true,
title: $('#tooltip-content').html()
});
This is a better approach (in my opinion). Easier to read and maintain - no HTML inside your javascript or inside the attribute data-content.
Yes you can. Try using the popover content and html attributes...
See Doc
http://jsfiddle.net/4jhzg/
html
<ul>
<li class="in-row"><a href="#" id="meddelanden"
data-title="Meddelanden" data-toggle="clickover" data-placement="right">
<i class="icon-globe"></i></a>
</li>
</ul>
Script
var elem = '<div>google</div>';
$('#meddelanden').popover({animation:true, content:elem, html:true});
I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.
As an illustration to what I want to achieve, take a look at http://jquerymobile.com/test/docs/buttons/buttons-icons.html.
Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.
Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!
This is what I was looking for:
<ul data-role="listview">
<li data-role="list-divider">
Fruits
<span class="ui-li-count">
<a href="#" data-role="none" data-theme="b">
Button
</a>
</span>
</li>
<li>Apples</li>
<li>Grapes</li>
<li>Others</li>
</ul>
Note that the list divider contains a SPAN which acts as a button... quite ingenious :)
Anyways, thanks for your help!
You are looking for a Split Button list
This is an example you can put two icon buttons inside:
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Opciones de platillo</li>
<li><a href="#" >Notas</a></li>
<li>
Tiempo
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>
Comensal
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>Modificadores</li>
<li>Terminadores</li>
<ul>
</div>