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);
Related
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);
});
});
There's a weird behavior that I've been experiencing with only the webkit browsers since last year, and it is driving me nuts.
I've tried doing searches on this, but I don't seem to be able to hit the keywords relating to this issue.
I have a html structure as below:
<div style="border: 1px solid #000; width:200px;height:200px; overflow:hidden;position:relative">
<div style="width:200px;position:absolute">
<p>long line</p>
<p><input type="text" value=""/></p>
<p>long line</p>
</div>
</div>
You can visit the live example in the jdfiddle link:
jsfiddle
For me, using Chrome(18), when one clicks and drag-selects text in the text input field out of the input box, you are able to "scroll" the parent element, although the CSS overflow is set to hidden.
You can try it from the fiddle by click select-dragging right, top, bottom, left. Works wonders.
More complex html structure yields more bizzare scrolling behaviors. In fact, I can almost do a slide show animation with elements sliding in and sliding out in sequence, just by drag selecting.
This behavior isn't experienced in firefox, fortunately.
Is anyone experiencing this behavior as well?
Is this supposed to be a feature of webkit?
Does anyone knows how to disable this "scrolling" behavior?
Thanks!
edit:
Thanks to #PhilipK, he has found a related post with a javascript solution answered below.
As my webpage is heavy with javascript I would like to find out if there are there any possible CSS solutions.
edit2:
Thanks to #tiffon, he found another javascript solution. His solution could be implemented in CSS (but with some limitations to mouse events, so the CSS solution is kind of incomplete).
I think abusing pointer-events: none; might be another option:
Dupe question: https://stackoverflow.com/a/13897395/1888292
http://jsfiddle.net/7CuBV/21/
So this worked for me - see here - basically listen to the onscroll event and set both scrollTop and scrollLeft to 0.
I found this problem too, after a bit of experimentation I removed an overflow:hidden from one of the parent divs (the very outer div which was scrolling), and it appears to have solved it. I wasn't using any iframes.
I know this an old thread, but I've just faced the same problem.
I created this fix:
// DISABLE INPUT DRAG SCROLL (CHROME BUG FIX)
var disableScrollDrag = false;
$('input, select, textarea').unbind('mousedown').mousedown(function(e) {
disableScrollDrag = true;
$(this).css('pointer-events', 'none').addClass('disable-scroll-drag');
});
$('body').mousemove(function() {
if (disableScrollDrag === true) {
$('.disable-scroll-drag').each(function () {
$(this).css('pointer-events', 'auto');
});
disableScrollDrag = false;
}
});
Just wrestled with this strange one for the first time. I found that if I set the width of the text field to something less-than-or-equal-to the container, the parent element didn't scroll in relation to the text input value.
The example linked to above gives the basic idea, but it's about an iframe and can be a little confusing to implement on a text input within a div, which is what I (and the original poster) were facing.
Here's what I ended up doing, using jquery;
$('body').on('select', '.my_text_input', function(e) {
$('.div_that_was_moving_weirdly').scrollLeft(0);
return false;
});
This is still imperfect, as there will be a jarring scroll over and then jump back, since the select event doesn't seem to kick in until you're done selecting. I tried various events but this is the best I could do.
So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.
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 am using Twitter's own Search Widget (Which can be seen here) on my site and it is contained in one of many switching tabs, basically consisting of divs that are hidden and shown according to which link is clicked.
There's no need for code here because it's a very simple situation to explain, basically the twitter feed is not being populated with new tweets when it is contained in a div which has display:none.
You can see this by going onto the twitter widget demo page and hiding it in your element inspector. Wait a few seconds and then show it again and you will be able to see that there are no new entries, just a pile of dotted borders.
How can I ensure the feed is being populated even when it is hidden?
Thanks.
Why not use some jQuery to hide and show the widget... without resorting to altering the css? Something like..
$('#example-preview-widget').hide();
$('#example-preview-widget').show();
This worked for me in the console with the issues you mentioned.
EDIT
After more testing, I can see that the above doesn't work. I did find a fix (I think)...
Instead of using hide() and show() or display:none, try to position the div off the screen using
position:absolute;
left:5000px;
or something similar. Then you can toggle it back in position.
When tested in the console, this keeps the tweets loading.
Shrink the div down to nothing, hiding the overflow:
#your-div {
height: 0;
overflow: hidden;
}