I have a working click-able, collapsible div script:
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
$(".toggle-content").hide();
$(this).next(".toggle-content").slideToggle(500);
});
});
It started out just like this:
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
$(this).next(".toggle-content").slideToggle(500);
});
});
Thsi second example worked nicely, but it made it so the user could open all the divs and this made the page too tall. I added the hide() function, but now it's causing this other issue.
I would like to add functionality that when each div is clicked again, it actually closes it (hides it). Then, all divs would be closed (hidden) at this point. Currently, one div is always open (visible). I want both functions if possible...
I'm using accordion elsewhere (I know this could be used here) but I kind of need to get this going quickly so I'm not trying to implement the simpler script here. If I could just find a fix using the existing script, I'd be stoked.
EDIT
I've edited the fiddle to show the improved fix:
http://jsfiddle.net/nicorellius/gsDVS/
This should work. It will ignore hiding the content related to the clicked element and will slideToggle that div accordingly
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
var $next= $(this).next(".toggle-content");
$(".toggle-content").not($next).hide();
$next.slideToggle(500);
});
});
Related
I would like to achieve the following effect in my dropdown menu, using only CSS and HTML?
Basically the idea is when move the mouse outside the dropdown menu, it keeps open till you click outside the menu or after X seconds. Is it possible to achieve this without any extra libraries or technologies (besides CSS and HTML)?
UPDATE: Now that the question is clarified, it would seem the behavior that you are seeking is not possible without using JavaScript. I did find an example of a pure CSS clickable dropdown, but it does not meet all of your criteria.
--- Original answer before question was clarified ---
You've actually asked two questions here. You originally did not specify a preferred technology to accomplish this, so I found answers to each using jQuery. (These answers use .show() and .hide() to show/hide the element - but you could also use .css() to directly change the CSS yourself, if you prefer.)
Dropdown keeps open until click outside the menu
You can detect a click on the document and then check for immediate ancestry to see if the desired element was clicked. (Partial credit: https://stackoverflow.com/a/3028037/561309)
$(document).click(function(event) {
if($(event.target).closest('#menucontainer').length) {
if($('#menucontainer').is(":hidden")) {
$('#menucontainer').show();
}
}
if(!$(event.target).closest('#menucontainer').length) {
if(!$('#menucontainer').is(":hidden")) {
$('#menucontainer').hide();
}
}
})
Dropdown keeps open until certain time has passed
You can use the setTimeout function to have the CSS change after a certain period of time - example here is two seconds. The .stop method should keep the timeout from executing once the mouse moves back over the menu, but this should be tested. (Partial Credit: https://stackoverflow.com/a/14247096/5365001)
$(document).ready(function(){
$("#menucontainer").click(function(){
$("#menucontainer").toggle());
});
$("#menucontainer").mouseout(function(){
setTimeout(function(){ $("#menucontainer").hide(); },2000);
});
$("#menucontainer").mouseover(function(){
$("#menucontainer").stop(); });
});
});
And, if you wanted to combine both, this should do the trick:
$(document).ready(function(){
$(document).click(function(event) {
if($(event.target).closest('#menucontainer').length) {
if($('#menucontainer').is(":hidden")) {
$('#menucontainer').show();
}
}
if(!$(event.target).closest('#menucontainer').length) {
if(!$('#menucontainer').is(":hidden")) {
$('#menucontainer').hide();
}
}
})
$("#menucontainer").mouseout(function(){
setTimeout(function(){ $("#menucontainer").hide(); },2000);
});
$("#menucontainer").mouseover(function(){
$("#menucontainer").stop(); });
});
});
Say I have a URL: http://rythmengine.org/doc/expression.md#transformer
Immediately after the page is loaded, the anchor is shown correctly, however I have a script to automatically add some iframes across the page, chrome/opera will later on shift away from the anchor #comment, firefox and IE (10) are all good.
Any idea how to fix it in Chrome/opera?
I do not know if I would implement this or not since the iframes do take a noticeable amount of time to load and the user might already be scrolling around the page and get jolted back to the hash element but here is a solution I came up with using jQuery.
Since the iframes are being replaced in the document after it initially loads you can use the .load() function which normally never fires if you just have it on the document.
Demo on this page and edit the fiddle here.
Just add this jQuery code into your script tag where you replace all of the pre code:
Code:
$('iframe').load(function() {
moveToHash();
});
// Scroll to the url hash element
function moveToHash()
{
var hashElem = $(window.location.hash);
// If the hash elment exists
if(hashElem.length)
{
window.scrollTo(hashElem.position().left, hashElem.position().top);
}
}
Edit: had a few mistakes and unnecessary in the code that are now fixed.
When every iframe ends loading tell the browser to go to that hash
$('iframe').load(function() {
document.location.href = document.location.hash;
});
I am having problems adding jpanel in my web.
I have two divs with the same class, where I want to add the scroll, but in the first visit to the web, it shows only 1 div with scroll.
When I refresh the web, it shows both. (Except in Chrome, where it never shows)
All needed libraries are added, and divs have the class tag.
Here comes the code:
$(function()
{
$('.scrollCh').jScrollPane();
});
Thank you.
Well that is very strange, but did you try to add the reinitialize option? like
var settings = {
autoReinitialise: true
};
$('.scrollCh').jScrollPane(settings);
I'm doing some documentation where I make heavy use of anchors for linking between pages on a wiki.
see here:
http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures
The feature that really makes this work well is when the browser shows the anchor at the absolute top of the pane. When it gets confusing is when linking to an anchor shows the anchor half-way down the page since the page is scrolled down all the way
see here:
http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227
My solution in the wiki (first link) was to put a blank image at the bottom of the page simply to make the browser show the anchor right at the top. Is there a better way to do this? Is there a way to do it in the second link (in which I can't add a blank image)?
Putting a blank image at the bottom of your page is a bad idea, since it will expand your document to a unnecessary height.
You could throw in some javascript to apply an effect to the anchor you just travelled to, to highlight it wherever it is.
Without altering the height of your document (i.e. adding extra padding at bottom), you'll always have this issue.
However, using bit of JS/jQuery, the user experience can be improved considerably:
On clicking a named anchor:
Instead of jumping in a flash (broswer's default behavior), add a smooth scroll
add an highlight to indicate current selection (this helps tremendously in 2nd case as the user can clearly see what is current)
Created a demo to illustrate the concepts: http://jsfiddle.net/mrchief/PYsyN/9/
CSS
<style>
.current { font-weight: bold; }
</style>
JS
function smoothScroll(elemId) {
// remove existing highlights
$('.current').css({backgroundColor: "transparent"}).removeClass('current');
var top = $(elemId).offset().top;
// do a smooth scroll
$('html, body').animate({scrollTop:top}, 500, function(){
// add an highlight
$(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
// keep tab of current so that style can be reset later
$(elemId).addClass('current');
});
});
}
// when landing directly
if (document.location.hash) {
smoothScroll(document.location.hash);
}
$('a[href*="#"]').click(function() {
// utilizing the fact that named anchor has a corresponding id element
var elemId = $(this).attr('href');
smoothScroll(elemId);
});
You can create a absolutre positioned pseudo-element with a great height to targeted block using just the following CSS (for the second link in your post:
#nums td:target a::before {
content: '';
position: absolute;
height: 700px;
}
The height must be around the height of the viewport, so the best solution is to create these styles on the fly using js. But if you don't wan't to use js, just use height: 1000px or more — if you don't mind a gap at the bottom of course.
The best part: it's only CSS and there would be no gap when no anchors are targeted.
Edit: just a sneak peek into the future: if the vw/vh units would come to other browsers (now it's only in IE9), this could be awesomely done with just CSS using height: 100vh :)
You could use Javascript / jQuery to create a white div that has the necessary height needed to put your element at the top of the browser window, and you could even remove this upon scrolling away.
However I would highly recommend against doing so as this will expand your page where it isn't needed. It's a lot smarter to simply style the tag upon going there (through Javascript / jQuery) so it pops out to the viewer, for instance by setting the font-weight to bold or changing the background-color.
I would probably use a combination of jQuery and PHP for this:
PHP(somewhere right after your <body> element):
<?php
$anchor = explode('#', $_SERVER['REQUEST_URI']);
$anchor = $anchor[1];
echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>
And then the jQuery:
<script type="text/javascript">
$(function(){
$('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
});
</script>
Hope this helps.
I've created an example of the problem here:
http://jsfiddle.net/jXLSW/
Notice that when you hover over the image a div shows up at the top of the image. When you leave the image, it goes away. The problem is when you move your mouse over the div at the top. It goes into this show/hide cycle because the mouse is entering/leaving.
This div that shows up at the top is going to contain icons that act as a toolbar. How can I keep the toolbar visible when I hover over it? More importantly, how can I get the hover event to stop cycling?
UPDATE: The interesting thing is the following code works as desired. The problem is that there seem to be livequery issues in that often times, it doesn't actually kick in. Therefore, no div shows up, which is a major problem as well.
$('.has-menu').livequery(function() {
$(this).hover(function() {$(this).find('div.img-menu').slideToggle();}, function() {$(this).find('div.img-menu').slideToggle();});
});
Well, I changed the code to this:
$('.has-menu').live('hover', function(e) {
if (e.type == 'mouseover') {
$(this).find('div.img-menu').slideToggle();
}else{
$(this).find('div.img-menu').slideToggle();
}
});
and now all is well.