jQuery code for sliding div (accordion) - javascript

I am looking for some good jQuery, XHTML & CSS code to achieve the effect as seen in the following image:
http://i48.tinypic.com/a3o4sn.jpg
Obviously this is a static image, what is supposed to happen is the text and the transparent background is hidden, and when you put your mouse over the image it slides up into view and down again onmouseout.
I think this is an accordion, can anyone point me in the right direction (or maybe you've seen another site that does this)?

Your may be interested in this great resource: Sliding Boxes and captions
DEMO

I've recently used a jquery plugin that does something quite similar.
You may find the plugin does all you need, or look at the source to see how the slide-in effect is achieved (although, of course, there's more than one way to do just about anything).
The plug-in is called Showcase
Its home page has more info and demo and tutorials
Finally, as an added demo, here's the site where I used it.
HTH

My approach to this effect is to have a div with overflow: hidden and the transparent black div with a top margin that puts it "outside" the container." Using .hover() you can tell the black div to slide up when the mouse is over the container div, and to slide away again when the mouse leaves.
Markup:
<div id='container'>
<div id='slider'>Some Text</div>
</div>
Styles:
div#container {
height: 100px;
width: 100px;
overflow: hidden;
}
div#slider {
width: 100px;
height: 40px;
margin-top: 100px;
background: black;
}
And your script:
$('#container').hover (
function () {
$('#slider').css('margin-top', '60px'),
$('#slider').css('margin-top', '100px');
);
I forget if you have to put the 60px in quotes or not, or if you have to pass 60 as an int, play around with it, but hopefully this gets you started.

Related

Automatically Animate/Scroll A Div Horizontally On Page Load

I have a seemingly basic question that I can't find any resources in what I am trying to acheive. I'm new to JavaScript and fairly mediocre at CSS.
What I am trying to accomplish is this. A page which can be displayed on a TV screen showing a list of sports results, overflowing to the right. I want the page to automatically scroll that div across to the right (which has a dynamic length depending on the amount of content) so it can see all the scores across all divisions and automaticaly scroll content to the right. When it reaches the end, pause, and then refresh (using Ajax) snapping back to the beginning.
I'm sure if I can be pointed in the direction of the right functions to use I can hook the various parts together.
Here's an example of something I am trying to run on page load that I'd like to scroll smoothly to the end over the course of 10 seconds, I just can't work out how to identify/set the "end" of the div.
$('#ScrollMe').animate({
scrollX: ??? //To div end;
}, 10000);
I think if I can solve this part, I can solve the rest.
Any pointers? Javascript, CSS.... open to anything!
You can use the .scrollWidth property to determine how far to scroll, subtracting the visible width will give a more accurate end point, eg:
(styles and animation time set to 2s, just to demonstrate what's happening)
$("#scrollMe").animate({
scrollLeft: ($("#scrollMe")[0].scrollWidth - $("#scrollMe").width()) + "px"
}, 2000);
#scrollMe { width: 100%; border:1px solid blue; overflow:auto; }
#inner { width: 6000px; border:5px solid red; height:20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=scrollMe>
<div id=inner>
</div>
</div>
You just need to apply overflow: scroll css propertie, to the div you want to "overflow" the page width. So it will add a bar below the div, such as the default scrolling bar of every browser.
parentDivWithContentToOverflow{
Overflow: scroll;
}
This is a great example of what you need.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
But you need to specify the div to achieve this.
If your requirement is only to scroll to the end of the page(which is right), then you can use your example. But you need to specify the pixel location to scroll to right. For that, you might need something like the below.
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
The above code snippet was stolen from this answer 😁
https://stackoverflow.com/a/59520378/4972683

Creating an overlay page for app

I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.
I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/

Click link, div slides out, linked div slides in, click to close and reload first div

I wish I knew how to write this myself.
http://www.cubancouncil.com/work/project/coppola-winery/
The linked page has the exact function I would like to use. How I believe their script works. Click an image which hides the container div for that image by sliding it off to the right and loads/slides in a larger image from the right to left which is in a fixed position.
If someone here is nice enough to answer this question with a solution would you mind taking it a step further and commenting on portions of your code so I can link it to the proper html?
I think understanding this one script would set me on a path to nailing down more advanced Javascript & Jquery. Thanks.
EDIT: I found a better example with some code provided. Go to the section where it talks about how to slide your element left. If you have questions, just let us know.
I've also taken the liberty to give you a full working example (exact same as the one in the article) so you can just run it in your browser
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>
The article explains most of it but I'll give you a quick run-down. In essence what we're doing is we're making it so that whatever you're trying to slide, we are altering the left position so that it comes out. Initially, I set the CSS to be -500px so it is outside the screen. The javascript then listens for the button click and moves the div by changing the left position. Jquery's animate() function does most of the work though.
The confusing bit about this is the ternary operator. You can find more info on that here. Essentially it just checks the left property to see if it's 0. If it is, we want to move it back outside to -500px. If the left isn't 0px, we know it must be outside the screen, so we move it back to 0px.
If there is anything else you're confused about let us know.
Created simple fiddle for you (notice it WORKS ON HOVER!!) but it should get you going, it's kinda late in my country so my brain doesn't work properly:)
Fiddle here
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){
$(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});

jQuery Mobile, transparent black overlay effect

I am currently using jQuery Mobile for a Phonegap application and I was wondering how could I add a black overlay that is semi transparent over only the content of a page. I don't want it to cover the top and bottom navbars. This would happen while I place an AJAX call to the server.
This effect is similar to the Twitter iOS app, when you are typing in the search bar.
$('#search').ajaxStart(function() {
// what do I put here?
});
Thank you for your help everyone! Much appreciated.
I agree with meagar (who should make his comment an answer so it can be accepted!) but would also add that if you don't want the overlay div to always be present (but just hidden), you can add it on the fly instead:
$('#search').ajaxStart(function() {
$('#content').wrap('<div class="overlay" />');
});
(#content represents whatever you happen to call your content wrapper and .overlay is the name I happened to choose for mine; easily changed!)
Whenever the Ajax complete callback fires (which will also be where the .hide() would be used in meagar's suggestion), just unwrap it again with this:
$('#content').unwrap();
The rest is CSS.
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
}
Keep in mind... this may not in fact be the right CSS approach, depending on what's already on your page. The basic idea is that you want it to span just your content area, but there are traps! Floats, absolute positioning of some things... all conspire to make your overlay not cover only the content area. If you run into that trouble, it's a separate SO question though. ;-)
JSFiddle: http://jsfiddle.net/Ff5wV/

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}

Categories