How to make a YouTube-like drop-down section in Javascript? - javascript

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

Related

Current menu item

I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.

EMPTY dropdown content box

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/

Expand/Collapse Text

The code below works fine with ONE Reveal/Hide Text process
<div class="reveal">Click Here to READ MORE...</div>
<div style="display:none;">
<div class="collapse" style="display:none;">Collapse Text</div>
However if this code is duplicated multiple times, the Collapse Text shows up and doesn't disappear and in fact conflicts with the Expand to reveal even more text instead of collapsing as it should.
In this http://jsfiddle.net/syEM3/4/ click on any of the Click Here to READ MORE...
Notice how the Collapse Text shows up at the bottom of the paragraphs and doesn't disappear. Click on the Collapse and it reveal more text.
How do I prevent this and getting to work as it should?
The two slideDown function calls are not specific to the .reveal and/or .collapse that you are currently doing. i.e.
$(".collapse").slideDown(100);
will find all the elements with the class .collapse on the page, and slide them down. irrespective of what element you just clicked.
I would change the slideDown call to be relavant to the element you just clicked i.e. something like this
$('.reveal').click(function() {
$(this).slideUp(100);
$(this).next().slideToggle();
$(this).next().next(".collapse").slideToggle(100);
});
in your code
$('.reveal').click(function() {
$(this).slideUp(100);
$(this).next().slideToggle();
$(".collapse").slideDown(100);
});
$('.collapse').click(function() {
$(this).slideUp(100);
$(this).prev().slideToggle();
$(".reveal").slideDown(100);
});
this two rows doesn’t do what you want as they act on all elements of the specified class
$(".reveal").slideDown(100);
$(".collapse").slideDown(100);
When you do $(".collapse").slideDown(100);, jQuery runs slideDown on everything with the .collapse class, not just the one that's related to your current this. To fix this, refer to the collapse based on its location to $(this).
Do do this, use something like $(this).siblings(".collapse").slideDown(100);
Note that this particular selector will only work if you enclose each text block in its own div. With each text element in its own div, like you have it now, .siblings(".collapse"), which selects all the siblings of $(this) with the collapse class, will still select both of the collapse elements.
Okay, I think you should take a different approach to your problem.
See, jQuery basically has two purposes:
Selecting one or more DOM elements from your HTML page
manipulate the selected elements in some way
This can be repeated multiple times, since jQuery functions are chainable (this means you can call function after function after function...).
If I understood your problem correctly, you are trying to build a list of blog posts and only display teasers of them.
After the user clicks the "read more" button, the complete article gets expanded.
Keep in mind: jQuery selects your elements very much like CSS would do. This makes it extremely easy to
come up with a query for certain elements, but you need to structure your HTML in a good way, like
you would do for formatting reasons.
So I suggest you should use this basic markup for each of your articles (heads up, HTML5 at work!):
<article class="article">
<section class="teaser">
Hey, I am a incredible teaser text! I just introduce you to the article.
</section>
<section class="full">
I am the articles body text. You should not see me initially.
</section>
</article>
You can replace the article and section elements with div elements if you like to.
And here is the CSS for this markup:
/* In case you want to display multiple articles underneath, separate them a bit */
.article{
margin-bottom: 50px;
}
/* we want the teaser to stand out a bit, so we format it bold */
.teaser{
font-weight: bold;
}
/* The article body should be a bit separated from the teaser */
.full{
padding-top: 10px;
}
/* This class is used to hide elements */
.hidden{
display: none;
}
The way we created the markup and CSS allows us to put multiple articles underneath.
Okay, you may have noticed: I completely omitted any "read more" or "collapse" buttons. This is done by intention.
If somebody visits the blog site with javascript disabled (maybe a search engine, or a old mobile which doesn't support JS or whatever),
the logic would be broken. Also, many text-snippets like "read more" and "collapse" are not relevant if they don't actually do anything and are not part of the article.
Initially, no article body is hidden, since we didn't apply the hidden css class anywhere. If we would
have embedded it in the HTML and someone really has no JavaScript, he would be unable to read anything.
Adding some jQuery magic
At the bottom of the page, we are embedding the jQuery library from the google CDN.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This is a best practice and will normally speed up your page loading time. Since MANY websites are embedding
jQuery through this URL, chances are high that its already in the visitors browser cache and doesn't have
to be downloaded another time.
Notice that the http: at the beginning of the URL is omitted. This causes browsers to use the pages current protocol,
may it be http or https. If you would try and embed the jQuery lib via http protocol on a https website, some browsers will refuse to download the file from a unsecure connection.
After you included jQuery into the page, we are going to add our logic into a script tag. Normally we would
save the logic into a separate file (again caching and what not all), but this time a script block will do fine.
Finally some JavaScript
At first, we want to hide all elements with the css-class full, since only teasers should remain displayed. This is very easy with jQuery:
$('.full').hide();
The beginning of the script $('.full') tells jQuery: I need all elements with the CSS-class full. Then we call a function on that result, namingly hide() which purpose should be clear.
Okay, in the next step, we want to add some "read more" buttons, next to every teaser. Thats an easy task, too:
$('.teaser').after('<button class="more">Read more</button>');
We now select every element with the css-class teaser and append some HTML code after() each element - a button with the css-class more.
In the next step, we tell jQuery to observe clicks on every one of this freshly created buttons. When a user has clicked, we want to expand the next element with the css-class full after the clicked button.
$('.more').on('click', function(){
//"this" is a reference to the button element!
$(this).slideUp().next('.full').slideDown();
});
Phew, what did we do here?
First, we told jQuery that we wanted to manipulate this, which is a reference to the clicked button. Then we told
jQuery to hide that button (since its not needed anymore) slowly with slideUp().
We immediately continued telling jQuery what to do: Now take the next() element (with the css-class full) and make it visible by sliding it down with slideDown().
Thats the power of jQuerys chaining!
Hiding again
But wait, you wanted to be able to collapse the articles again! So we need a "collapse" button, too and
some more JavaScript:
$('.full').append('<button class="collapse">Collapse text</button>');
Note: we didn't use the after() function to add this button, but the append() function to place the button
INSIDE every element with the css-class full, rather than next to it. This is because we want the
collapse buttons to be hidden with the full texts, too.
Now we need to have some action when the user clicks one of those buttons, too:
$('.collapse').on('click', function(){
$(this).parent().slideUp().prev('.more').slideDown();
});
Now, this was easy: We start with the button element, move the focus to its parent() (which is the element that contains the full text) and tell jQuery to hide that element by sliding it up with slideUp().
Then we move the focus from the full-text container to its previous element with the css-class more, which is its expanding button that has been hidden when expanding the text. We slowly show that button again by calling slideDown().
Thats it :)
I've uploaded my example on jsBin.

Jquery / AJAX sliding Menu - CrazyEgg - Used With Frequently Asked Questions

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/

JQuery-how to get a imagelink as pop up on mouse hover on a div tag

I have a tag on a html page on which I am trying to write a jquery function in order to pop open a image link on "hover" which when clicked on, takes me to another web page. I need to set the "navigateURL" property on the link on "hover".
I am fairly new to jquery.
Can somebody please suggest me a good approach for this?
I highly appreciate any help you can offer.
Thanks
$('#tagdiv').hover(function(e)
{
$('#hoverdiv').html('<div><image src="'+$(this).html()+'"/></div>');
});
where 'hoverdiv' is id of any div which is on that page and 'tagdiv' is id of where you want to hover event.
like:
<div id='tagdiv'>image.jpg</div>
<div id='hoverdiv'> </div>

Categories