I am trying to use jquery to show different reveal.js slides as I hover over several links.
I have tried and it works by clicking by giving an id to the slide and href='#/01' to a link, and it works.
For example:
Link:
<a class="link" href='#/01'>This links to section id="01".</a>
Slide:
<section id="01">
Text here.
</section>
But I can't get the hover to work for example using:
<script>$(".link").hover(function() { $("#01").fadeToggle();});</script>
Thanks
Related
In my list some elements have sub-items and some not. These, that don't have have sub-items should work as buttons/links.
Unfortunately including an item like in my collapsibleset
<div data-role="collapsible" data-iconpos="none">
<h3 >Title</h3>
</div>
and setting in JS a's href to needed link looks great, but JQM triggers open/closing event by clicking on it. That changes it's look and my link inside the element doesn't work.
Does someone have ideas?
Is that what you want ?
JsFiddle
$("h3").on("click", function(e){
$(this).parent().collapsible({collapsed: true});
});
It prevents the collapsible to open
If you need the collapsible to stay in the state it is when the page
is loaded, you can check the state of the collapsible with
$(".ui-collapsible").hasClass('ui-collapsible-collapsed')
and let it open if it is already open, or close if it is already
close.
JsFiddle
You could use that if you have a button inside your collapsible
header, and do not want the collapsible to react when you click on
the button but still on the header (outside the button) Final
working exemple : JsFiddle
Edit : As you requested in the comments, here is a JsFiddle with a collapsible header opening a website on click instead of collapsing/expanding the collapsible.
Explanation :
1) You could store the url in an attribute of the "h2" like this :
<h2 data-url="google.com"; >google.com</h2>
2) Then you add a class when you don't want the heading to collapse/expand the collapsible : class="doNotTriggerCollapsible"
So you have :
<h2 class="doNotTriggerCollapsible" data-url="google.com"; >google.com</h2>
3) Then you retrieve the url with $(this).data("url") and you open the link with
window.open($(this).data("url"))
I want to add thumbnails to my list items as per the example here.
I've followed the instructions, eg:
To add thumbnails to the left of a list item, simply add an image
inside a list item as the first child element. The framework will
scale the image to 80 pixels square.
but the thumbnail image is appearing above my text, rather then beside it to the left.
My HTML is:
<li><img src="img/facebook.png"/><a id="facebook" href="#">Facebook</a></li>
Would anyone know the proper way of doing this?
Try to include your image inside a tag.
like that...
<li><a id="facebook" href="#"><img src="img/facebook.png"/><h2>Facebook</h2></a></li>
I'm only adding this here since it appears you can't format in comments. If you do "open source" on the page you mentioned, you will see the following:
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
Just pointing out it helps to check source on the samples you want to emulate.
I'm trying to put a help icon from jquery ui next to a input field. I get a button with a question mark but no effect when I hoover over it.
<span class="ui-state-default ui-corner-all ui-icon ui-icon ui-icon-help"></span>
Also, the questionmark is not yellow like is not yellow like it is in the demo. I have all the files.
What am I missing?
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
Ive built a webpage with 'tabs' using rails. When a user clicks a tab, a new page loads. I want to format it so the tabs are always in the same place on the page as a user clicks them. This happens as long as the user has not scrolled down on the page. If a user has scrolled down, clicking on the tab will refresh the page and it is no longer scrolled down - which make clicking the tabs look bad. Is there a way to keep the spot on the page where the user has scrolled down, without using Javascript? If it must be done with Javascript, any suggestions?
T
alt text http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png
Without Javascript, nope. If they were at an exact location, you would be good to go, using an anchor (example.html#anchor), but since you don't know the exact location, you're pretty much out of luck.
So sorry!
You can do it but you will need a small amount of Javascript and some CSS hiding.
Suppose these are your tabs:
<ul id="nav">
<li class="tab">Content 1</li>
<li class="tab">Content 2</li>
</ul>
And suppose this is your content:
<div id="content" class="content1">
<div id="content1">
<h1>Some content</h1>
<p>This is my content.</p>
</div>
<div id="content2">
<h1>More content</h1>
<p>This is my other content.</p>
</div>
</div>
What you would need to do then, and I am demonstrating using the Ext.Core library, is:
<script type="text/javascript">
Ext.onReady(function() {
Ext.select('.tab a').on('click', function(ev, el) {
ev.stopEvent();
var content_id = el.href.replace('#', '');
Ext.get('content').removeClass(['content1', 'content2', ...]).addClass(content_id);
});
});
</script>
You also need a little CSS like so:
#content.content2 #content1,
#content.content1 #content2 {
display:none;
}
This hides the other content we are not looking at. We set a class on the content container called contentN which is the href of the link for that tab. So if we have a tab with href="#content1" then we add a class to the content container called content1 and now that content is visible and other content is not.
The Ext.Core samples page has another way of doing it, and they have an example up showing it working. Their way is more involved than this.