I'm Trying to build a simple horizontal accordion that will eventually contain more complex data (iframes)... The problem is that I want the size of each accordion tab to be specific to the data it contains, so I'm trying to edit what's already out there (Some tabs are larger than others). When a user hovers over any tab I want to expand that tab to 50% (regardless of its previous size). All that is working fine, but the problem is I can't figure out how to go back to the tabs ORIGINAL width after mouseout. Right now I have the panels shrinking to 10% to illustrate the problem. If you cycle through the page then reload you will see what i mean. Any ideas?
http://www.brianvargo.com/test.html
You can save the original width somewhere. This is one way (with your code):
$(document).ready(function(){
$("ul li").mouseover(function(){
if (this.originalWidth == undefined) this.originalWidth = $(this).width();
$(this).stop().animate({width:'50%'},{queue:false, duration:500,})
});
$("ul li").mouseout(function(){
$(this).stop().animate({width: this.originalWidth},{queue:false, duration:600})
});
});
Untested, and you might choose a different way to save it, but the general idea is there.
What worked for me in a similar situation to yours, was create an attribute with the original size on load of said element, then retrieve it for later use.
Related
I'm having a problem implementing relatively complicated auto-scroll functionality on my page. This displays the issue in my code...
http://codepen.io/d3wannabe/pen/XXxdQq
I have multiple divs on my page (blue,red,green in my example) that I not only want to be able to scroll to (which the top 3 buttons in my example achieve perfectly), but I want to be able to scroll WITHIN (which the bottom 3 buttons represent my best attempt at).
The thing I can't figure out, is why the scroll within function works well on my first div ("scrollTo3rdBlueItem" button), but then less accurately with the other divs ("scrollTo3rdRedItem" and "scrollTo3rdGreenItem" buttons). In my full web application (which obviously has more data to scroll through), I basically see that the lower down the page the parent div is positioned, the less accurately I'm able to scroll within it.
I'm struggling to identify much of a pattern though so can't simply try tweaking the offset values. Any ideas what I might be doing wrong here would be hugely appreciated!!
...since I wasn't allowed to post this without quoting code - here's the jquery function you can see in my codepen!
function scrollToParent(parentID){
$('html,body').animate({scrollTop: $('#'+parentID).offset().top}, 500);
}
function scrollToChild(parentID, childID){
//first focus on the parent
scrollToParent(parentID);
$('#'+parentID).animate(
{scrollTop: $('#'+ childID).offset().top - 100}
, 500);
}
UPDATE
Answer here was COMPLETETLY wrong. Left here to preserve the comments.
UPDATE 2
Got IT! You need to take in to account the offset of the parent div. Update your scrollToChild function to the below;
$('#'+parentID).animate(
{
scrollTop: $('#'+ childID).offset().top - $('#'+parentID).offset().top
}, 500);
I am working on building a schedule. So far it's pretty straight-forward. There is one bit of functionality I am having issues with.
I have an ul that has a fixed height to allow scrolling. There are "Labels" (li.dayLabel) withing the ul that separate the hours. What I am trying to do is to have it so that when a label is scrolled out of view it will change the text in the placeholder to it's text. Then once that works, I need it to work in reverse. So when they label scrolls back into view it updates the placeholder. Basically, I am trying to make the placeholder be a title for the available items until another label is then scrolled out of view. This is for scrolling from the top. So as you scroll down the list the placeholder is meant to be a title for the section you are viewing until you reach another section and it takes its place. Then when you scroll back down I need it to replace the text with the previous li.dayLabel so the sections stay organized. I hope this makes sense.
You can see what I am trying to do by looking at the original that I am basing this off of. Notice how the placeholder changes as you scroll down the list and changes back when you scroll back up.
Demo: jsFiddle // Note: line 54 is the part that is in question
I originally used:
$(".snlf-schedule-list li.dayLabel:visible:first").text();
as the :first selector is suppose to only match a single element.
I later tried:
$(".snlf-schedule-list li.dayLabel:visible").filter(":eq(0)")
as this is suppose to be the same thing.
It seems that when an element is out of view it still is considered :visible I believe this is my issue.
Am I doing this completely wrong? I was under the impression that when you scroll an element like this it should no longer be :visible. After reading the documentation I have learned that this is not the correct selector to use.
It would appear that scrollTop is how I should be doing this. Now I have used scrollTop for scrolling down pages to disable animations when not in view but I am not clear on how to untilize this for a ul with scrollbars.
I tried:
var _first = $('li.dayLabel:first'); // next element to scroll out of view?
if( $(this).scrollTop() > (_first.offset().top+_first.height())) {
// Out of view
console.log("out");
} else {
// in view
console.log("in");
}
Updated Demo: jsFiddle
But it seems to be redundant as it's already calculating the first element so I am not sure how to get the correct element (the next one that's about to scroll out of view.) Then I need this to work when they scroll back up...
Any insight on this is much appreciated. Hopefully it's something simple I am just over complicating or missing completely.
Thanks,
Jeremy
The solution for my case was:
// Set placeholder text on scroll
var _scrollCagePositionTop = $(".snlf-schedule-list").offset().top;
var _first = $('li.dayLabel:first'); // first dayLabel element
$(".snlf-schedule-list").scroll(function(){
var _lastOffText = $(_first).text();
$("li.dayLabel").each(function() {
if ($(this).offset().top < _scrollCagePositionTop) {
_lastOffText = $(this).text();
}
});
$("#schedule-placeholder").text(_lastOffText);
});
What I did was set the known position of the top of the scroll cage (_scrollCagePositionTop)
When the user scrolls I set a variable _lastOffText that keeps track of the last item text content when scrolled out of view (less offset top than the palceholder). I then set this value to the placeholder.
This method allows me to have the proper text in my placeholder when the user scrolls up or down.
To fix the issue of an empty placeholder when the user scrolls back to the top I just set the default of _lastOffText to be the text of the first label ($(_first).text())
Hope others find this useful.
Here is the working demo: jsFiddle Final
I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..
The demo page referenced can be found here.
I'm trying to determine a way that on the click of a parent category (ex: Stone Tiles, Stone Sinks), that the JScrollPane would re-determine the current height and adjust as needed. Unfortunately, my attempts to do so have not worked yet.
I referenced the example here which provided the following function (to do a refresh)...
api.reinitialise();
I've tried to setup this function to be triggered by the category parents like so...
var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;
$("li.expandable.parent").click(function() {
api.reinitialise();
});
Unfortunately, while I was able to verify the click is being rendered, the function (api.reinitialize) doesn't appear to be working. I'm hoping that a fresh pair of eyes could point me in the right direction. :-)
Thanks!
The problem is that api.reinitialise executes immediately after the click, and the li element will not have expanded yet so when jscroll pane goes to to recalculate the height it gets it wrong. You can try adding a delay but the best solution would be to bind api.reinitialise() to an event that's triggered once the your list has finished expanding. I'm not sure how you're expanding the div within the li but if for instance it's using .animate, you could bind the api.reinitialise to the animation complete event.
Also noted that not all the parent li's have the class parent associated it to them. I would expect you would want the pane to reinitialize on the expansion and collapsing of all the main li elements.
Hope that helps !
Cheers :)
What you can do is have your inner divs expanded by default, and then close them with jquery, rather than in the CSS directly.
So instead of doing this:
.mydiv.closed {display:none}
do this in your jquery after the elements are drawn to the page:
$('.mydiv.closed').hide();
This will load the jscrollpane at the necessary height, and then collapse what you want to be initially hidden.
edit: I don't want to just take content from different pages and load it into the current page. What I really want to do is load different html files that will be interactive within the television. I have found that it is difficult to do this because you can't load html files into DIV's and you can't click on links through a transparent png file.
Hello,
I am building a website for a tv show that my friends and I make called Every Single Day.
here you can see the mock up of what I have so far:
http://www.uvm.edu/~areid/cs195/final/S/S.html
as of right now, the image I am using is just one big image that I sliced up with Photoshop.
What my goal is, is to use some sort of script to make it so the outside television will stay in place statically and the web-content within the television will transition without reloading the outer-most television.
I wanted to combine this technique with something similar to the fss slider script to allow each page on the site to slide, making it look like it is a continuation of the room. -Perhaps this isn't even the best way to achieve my desired result.
I have all of my images drawn and sliced, all I need now is some direction in what exactly to search for to find the pieces I am looking for.
Thank you very much, I am pleased to have joined this community,
cooper reid
Edit 5: http://jsfiddle.net/wdm954/pqAJK/10/ (Shows addition content.)
Edit 4: http://jsfiddle.net/wdm954/pqAJK/7/
This demo includes panning to specific frames.
var h = $('.clickable div').height(); //height of a single content DIV
var divCount = 0;
$('.clickable div').each(function() { divCount++; }); //count number of content DIVs
$('.pan').click(function(e) {
e.preventDefault(); //prevent default action (of <a>)
if ($('.content div').is(':animated')) return false; //disable click while animating
var x = $(this).attr('href'); x = $(x).index(); //get index of destination element
$('.content div').animate({top: -x*h +'px'}, 2000); //animate to destination
});
$('#tv-right').click(function() {
if ($('.content div').is(':animated')) return false; //disable click while animating
$('.content div').animate({top: '-='+h+'px'}, 2000); //animation
//if last div then go back to the start
if ($('.content div:last').css('top') == (-h * (divCount - 1)) +"px") {
$('.content div').stop().animate({ top: '0px' }, 1000);
}
});
Edit 3: http://jsfiddle.net/wdm954/pqAJK/5/
Ok, check this demo out. Clicking on the right side of the TV (where you may put some buttons) will scroll the content in the screen. When you reach the last content section, the next click will return to the first content section. I layered the content so the background divs scroll behind the TV image and the content scrolls above (so you can click on it. There are a few other tricks thrown in but look it over and you should get the idea.
Edit 2: http://jsfiddle.net/wdm954/pqAJK/3/ (Click the TV to see the transition. This has content divs instead of just a background image).
Edit: Check out this demo: http://jsfiddle.net/wdm954/pqAJK/
I would first cut out the screen part of the TV and save it has a .png with transparency so you can see what is behind the screen portion of the TV.
Then you can add a background image and animate that with jQuery to slide into view the portion you would like to display.
I *personally wouldn't use any slices, kind of an old school technique for when most people didn't have high speed connections.
Wrap everything inside the outer television in a <div>
Create seperate HTML pages that just has the HTML of the content that you want inside the television.
Use jQuery's AJAX get method to get the HTML for the page without refreshing it.
e.g. Your "single" image is in a <td> with ID "rightframe". So when rightframe is clicked, you might want to get the html of a page called single.html and put that inside the television (let's assume your <div> or <table> that has the code has ID content):
$('#rightframe').click(function() {
$.get('single.html', function(data) {
$('#content').html(data);
});
});
Edit: For the sliding part, you would have to create two separate tables/divs side by side, one for the current page, and one for the page that is being loaded. Then you could use a jQuery plugin like Slidy http://www.wbotelhos.com/slidy/ to transition between them.
Personally I think it would be much cooler if you could put an animated GIF of TV white noise on the television while the page is loading :)
Something along the following: http://jsfiddle.net/Vzdu7/