I want a button that when clicked a dropbown box appears with a little triangle on top connecting it to the button (similar to what a lot of the Google UI looks like). This is very similar to dropdown menu in jQuery ui or popover in bootstrap. However, I want the box to essentially be an empty div.
The closest I have found is the one that foundation has (http://foundation.zurb.com/docs/components/dropdown.html) but I don't understand their code enough to fully edit it the way I want (also I don't full understand how to use compass with it in order to do things like change the min-width or change the triangle color - I assume the triangle is another div behind the main box with a radius that gives it a triangle?). I also plan on using php/ajax inside the box so I am worried about compatibility with Foundation.
So the question is does anyone know of anyway to do this with JavaScript/jQuery?
You can make use of jQuery's .hide(), .show(), and .toggle() for this kind of effect. Then it's just a matter of using CSS to get it to look how you want.
Example: (pulled HTML from your link)
<div>
Has Dropdown
<ul id="drop1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</div>
<div>
Has Content Dropdown
<div id="drop2">
<p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>
</div>
<script>
$(document).ready(function() {
$("#drop1").hide();
$("#drop2").hide();
});
$("#drop1-link").on('click', function(e) {
e.preventDefault();
$("#drop1").toggle();
});
$("#drop2-link").on('click', function(e) {
e.preventDefault();
$("#drop2").toggle();
});
</script>
fiddle: http://jsfiddle.net/3b3xz/
Related
I have a phonegap app using jquery, it's built around listview, and uses some custom js to open & close specific list-dividers based on user input.
It does everything I want with all list-dividers having text only, however when I need to include an image it goes wrong. When first opened it looks fine, but once you click to expand the divider - and from that point onwards, it adds a line of what I think are jquery icons in white above the image (X, >, <, up-arrow, down-arrow, tick, cogwheel, refresh-symbol).
When I open the app in Firefox it's fine. but if I open it in Firefox's Develor Tools emulating a phone, the problem is there. And it's there once the app is actually on a phone.
This is the html
<ul data-role="listview" class="library" data-icon="false" data-inset="true" data-divider-theme="c">
<li data-role="list-divider" data-link="coffee" class="fontbrush"><div> Custom Tokens<img src="img/sample image.jpg"> </div></li>
<li class="lazy hidden coffee"><a></a>
<p><img data-src="img/luxury card.jpg">
and this is what I think is probably the relevant JS
// hide and show on search
$(function(){
$('[data-role="list-divider"]').toggle(function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
$(".lazy.show").each(function(idx){
var $img = $(this).find("img");
var src = $img.data("src");
$img.prop("src", src);
$(this).removeClass('lazy');
});
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
With just text there's no problem. It's only when an image is there.
Any ideas?
edit: problem showing up every time an image is present, not just when there is text too
I found a fix, although I'm still not sure what the problem was.
The code I originally took and adapted used a lot of .removeClass('ui-icon-plus') and .addClass('ui-icon-minus') to trigger changes in the list dividers and their children. I changed those to a pair of unique class names that don't reference icons. And it fixed the problem. No idea why. But it did!
This question already has answers here:
Show one div while hiding other divs with jquery when clicking on links
(4 answers)
Closed 8 years ago.
I have a page that lists a series of content. I then have filters so someone can narrow down their search. I'd like to show/hide a block of information in my sidebar according to the filter that someone has clicked on. Basically clicking on a filter will show/hide these DIV's.
Here are two of the filters. Notice the one that is currently selected has an added class of “active” in two places.
<div class="container">
<ul class="filters">
<li class=“first active>
<a class="filterbutton active" href="#filter">Category 1</a>
</li>
<li class=“last”>
<a class="filterbutton" href="#filter">Category 2</a>
</li>
</ul>
</div>
When the page loads, Category 1 is active by default so I will show my corresponding DIV “block-1” by default.
Here is where the magic needs to be: When the filter link is clicked on above I would like to show/hide two DIV's that I have loaded.
<div id="block-1">content</div> <—— Hide this one.
<div id="block-2">content</div> <—— Display this one.
It is also important that when a user clicks back on the first Category that it goes back to the default view of showing just the first block.
UPDATE: It took a long while but I finally figured it out. Using the "duplicate" answer here I tailored it to my needs. I also used some other code to add the necessary "rel" attributes that I needed.
This is definitely possible with simple js and CSS, however the hurdle will be in making it not look jarring. I would recommend using jQuery isotope. http://isotope.metafizzy.co. It isn't just for layouts, it also handles filtering quite nicely. If you don't need it for layout at all you could also use https://mixitup.kunkalabs.com
You can do this with toggle function : http://jsfiddle.net/AU8fX/1/
$( ".filterbutton" ).on( "click", function() {
$('.block').toggle();
});
You say your JS isn't that good, let's see if I can give you enough clues:
<a class="filterbutton active" data-target="#example" href="#filter">Category 1</a>
Html5 has the data-group attributes. I wrote target, but you can put anything there, it can be for your just code.
You can get that when clicked:
$('.filterbutton').on('click', function(){
// do something with the click
alert( $(this).data('target') ); // I alert it, you van use this as a selector
}):
You can togglethe active class very easy with some code in the onclick:
$('.active').removeClass('active');
$(this).addClass('active');
To show and hide elements:
$('.SomeElements').hide();
$( specific selector).show();
I'm having a bit of trouble figuring out what Crazy Egg used for their F.A.Q.s. I would like to implement the same thing exactly (where the questions slide down upon clicked - and show a blue box for the current active question).
Ex) https://www.crazyegg.com/help
I went through the code and I see it has javascript events, but I am unable to script this myself. Is there a plugin I can use for this behavior? Some form of showing/hiding divs I presume?
You should be able to code it yourself with jquery. Just look into very basic jQuery tutorial that goes over selectors, hiding and showing and click events. All you do is assign an id to each header that you click on, and then on click you hide all content and show the one clicked. You should read some stuff online, try something, and then come back with code and ask questions.
This effect can be achieved easily with jQuery's slideToggle function:
HTML:
<span class="faq">This is a FAQ question...</span>
<div class="answer" style="display: none;">
And this is the answer.
</div>
JavaScript:
$(document).ready(function(){
$(".faq").click(function(){
$(this).next("div.answer").slideToggle();
});
});
JSFiddle: http://jsfiddle.net/ySahP/
In YouTube when you click the top right button of your profile it drops a whole section on the top, moving all the content down, when you click it again, the section disappears, moving all the content back up. How do they do that?
P.S. I'm new to Javascript, so I don't even know how to search docs for this particular solution. Please be specific in description.
Thanks!
http://jsfiddle.net/qT3Em/
unless you want to write the animation yourself (not recomended)
you shuld use a libary witch comes with animations like jquery http://www.jquery.com
it commes with a function .toggle http://api.jquery.com/toggle/
that i used in the example belove
<button>A button</button>
<div style="display:none;">
<h1>Hidden Content</h1>
</div>
<h1>Lower Content</h1>
$(function() {
$("button").click(function() {
$("div").toggle("slow");
});
});
that will give you the effect you want
So I'm very much a jQuery noob and I don't know whether the following is possible - at least as I'm thinking of it - or how to do it.
The current setup
http://joelglovier.com
So I have a one page mini-site with a fixed navigation at the top of the screen. All (but one) of the navigation elements simply scroll the user down to the corresponding div down the page. I have that all set up just fine.
What I want to do...
I want to use jQuery to add a class of "active" to the list item anchors when they are positioned over their respective div on the page. Preferably it would not use the click function, so that even users who simply scroll down the page without clicking on the nav elements to get their would experience the same thing. Similar to the phpfog home page.
I peeked at the way phpfog.com has it setup and from what I could see it's using some type of calculation with the window selector to apply the class, but A) I don't completely understand what it's doing or how to build something similar, and B) I don't know if they are doing it in the most straightforward manner.
I wrote out what I want to accomplish in a plain english statement, since I don't have a mastery on jQuery enough yet to write it out in a syntax:
If .section-link is in the window on the
href value of same id, add class of
"active"
So here's the code I have (HTML only, the CSS is irrelevant bc I already know how I want to style it, just want to add the active class at the appropriate place):
<div id="site-nav">
<div class="wrap">
<ul id="nav-links">
<li class="section-title-nav top">
<h4>Home</h4>
</li>
<li class="section-title-nav skills">
<h4>Background</h4>
</li>
<li class="section-title-nav projects">
<h4>Projects</h4>
</li>
<li class="section-title-nav blog">
<h4>Blog</h4>
</li>
<li class="section-title-nav random">
<h4>Random</h4>
</li>
<li class="section-title-nav credits">
<h4>Credits</h4>
</li>
</ul>
</div>
</div>
And further down the page, sections that are linked to in the nav are marked up about like this:
<div id="random-section" class="main-section wrap clearfix">
<h2 class="section-title"><span class="bg">Random</span></h2>
<span class="section-title-border"></span>
<h2 class="coming-soon">COMING SOON</h2>
</div><!--/#random-section-->
So, and tips on how to accomplish this, or whether I'm thinking about it the wrong way is what I'm looking for. Thanks!
Here's a working example I put together; I will be the first to admit it can be improved but it might give you a decent starting point to work from.
http://jsfiddle.net/nogoodatcoding/KMwhZ/1/
The basic idea is to listen for scroll events on the window and then, for each navigation link, extract the href value and check if the corresponding element is visible or not. If it is, then it's link is selected and the previously highlighted element is deselected. I'm breaking early when the first visible section is found, you can get slightly different behaviour by going all the way through the list.
My example breaks when the divs are small enough in height that multiple divs are visible when the page is scrolled all the way to the bottom - in the case, the links for the lowest few divs will never get hightlighted. But that appears to be the case even with the phpfog page you linked to - the links for Testimonials and Free Tools never get activated because my display is tall enough to show the last 3 sections when scrolled all the way down. Note that this won't be the case if don't break early - there, the last visible section will be highlighted. But you can then see the opposite problem - the top section's link is never activated since something else is always visible.
<script type="text/javascript">
jQuery(document).ready(function($) {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$("#navbar li a").each(function() {//alert('dsfgsdgfd');
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass("active");}
});`enter code here`
});
</script>