I'm loading an rss feed box and applying jScrollPane to it. Works great on my other sites, but for some reason this one is breaking only in Safari. It loads the page correctly and then suddenly snaps to just the rss box all alone. I've tried .delay() and (window).ready thinking it was the timing, and .css(position), to no avail. Any ideas on why it's doing this?
it's here: miariddle.com/webclient/hundredstories/blog.html
scrollpane script:
<script type="text/javascript">
$(document).ready(function() {
$(".blog").jScrollPane();
});
</script>
CSS:
.blog {
width: 530px;
height: 250px;
position: absolute;
top: 380px;
left: 330px;
margin-left: 20px;
padding-left: 10px;
}
html/script that loads the feed:
I experienced similar issue, and here's what worked for me:
jQuery(window).load(function() {
jQuery('.blog').jScrollPane();
});
That is, use (window).load instead of (window).ready as you indicated in your question.
In my case, I had to use jQuery (not $) because of the WordPress script compatibility issues. But in your case it may work with $ as well.
Hope this helps.
P.S. Another thing I noticed, it seems that the .blog div of your site contains only rss feed. jScrollPane is applied to that div, so naturally it applies itself to the content of the div.
Related
I am trying hard to show a div in the last pages footer section.
But this not working for me. I have tried so many solutions given in
StackOverflow. But none of them are working for me.
Problem link is given below.
Link: https://jsfiddle.net/minhajhasan/qzd8w14b/
I have tried with these codes to take my div in the footer.
<Style>
.print-address{
position: absolute;
bottom: 0px;
left: 0px;
height: 50px;
}
</style>
HTML 5 and CSS3 have no support for printing page header and footers in print media.
And while you might be able to simulate it with:
tables fixed
position blocks
I'm working with a "one-page template" from scratch (just for fun and learn).
I started checking the examples from Boostrap. Later, I noticed that my div's does not fill width/height as I wanted, so I decided to try to work this out with simple CCS but failed, then, in another example, I used some code from FullPage.js.
I really like this bootstrap example and my only purpose is to fill every div on screen but keeping the nav at the top.
I have two working examples on jsfiddle to let you know what I'm doing.
1: fullpaje.js: In this, the navbar doesn't work properly when fullscreen but it does when is not fullscreen, yeah weird.. I mean, with a fullscreen doesn't show in what div are you checking, on another hand when isn't fullscreen it works. (maybe in jsfiddle works because is not fs, try to put the code and save it in an HTML file to see what I'm saying)
$(document).ready(function() {
$('#fullpage').fullpage({
/* no options */
});
});
2: just with css: In this, the navbar get lost in the second div and I don't know if it works correctly. It just disappears while scrolling down.
html, body {height: 100%;}
#section1 { width: 100%; height: 100%;}
#section2 { width: 100%; height: 100%;}
#section3 { width: 100%; height: 100%;}
#section4 { width: 100%; height: 100%;}
Do you have any suggestion about this?
Thanks
I put the HTML code in a file and ran it & saw the same issue. The way i fixed it was downloading the jquery.easings / scrolloverflow JavaScript packages and jquery.fullPage Style sheet page, do you have these installed?
I'm tying to achieve zoom effect which you can see here: http://x3dom.org/x3dom/example/x3dom_x3dElementCSSIntegration.html.
So, I have a simple element (it doesn't matter that this is x3d example, really), which I want to enlarge to full screen size with a click of a button, and then reduce back to it's original size after clicking the button again. I would very much appreciate any help I can get with coding this in JavaScript. I have viewed the page source on this example and tried to get it to work in my project, but I'm very bad with JavaScript and I can't seem to get it to work.
Also, I tried searching with Google, but all the examples I found are far fancier in comparison with what I need.
Something similar to the following should work.
HTML:
<div id="zoomable" class="resizable">
content
</div>
CSS:
.resizable {
position: relative;
}
.resizable.zoomed {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
JavaScript:
document.getElementById('zoomable').className = "resizable zoomed";
I've been trying out a few lightboxes for my website using MooTools 1.4, and I found this one that works and looks really nice (with easy implementation):
http://andrewplummer.com/code/quickbox/
On the demo website, the lightbox works perfectly, clicking the image brings up the overlay and image, and clicking the overlay removes them.
On my website, when you click an image that's marked appropriately, the lightbox pops up and everything works properly, however, when you exit the lightbox by clicking the overlay or pressing q/x/esc, the overlay hides and everything looks great. The only problem with this is that for some reason, this is being embedded into the body of my code:
<div id="qbOverlay" style="display: block; width: 100%; height: 100%; opacity: 0; "></div>
The problem that this causes is that it isn't ever removed after the lightbox is closed, so the entire page is blanked in
#qbOverlay {
display: block;
position: absolute;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
This is a problem because this makes the entire top of the page this overlay, and it's never removed after the lightbox is closed. When it's like this, I can't click any links or use any input boxes in the area that it's covering.
I have a feeling that the thing causing this problem is this:
close: function(){
this.quickBox.setStyle("display", "none");
this.quickBox.setStyle("cursor", "auto");
this.overlay.fade("out");
this.active = false;
}
I've tried using MooTools with compatibility mode and having every extra turned on, but with no luck.
This is an actual bug in mootools 1.4 https://github.com/mootools/mootools-core/issues/2074
Its about to be fixed this week in 1.4.1 (hopefully) but you can take the updated Fx.tween element shortcut protiotypes code for the fade here:
https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098
Alternatively, use a simple tween on opacity instead of .fade(), it allegedly works. You can also do a destroy on the overlay, which to me is the best fix
I am working on a website for a friend, using wordpress. It is located at revere glass. I have installed the NextGen gallery, and am attempting to modify the size of the slideshow via the code, as the plugin editor does not seem to work properly.
When I use firebug to examine the layout, I see:
img src="http://revereglass.seeimpactdesign.com/wp-content/gallery/revere/big-instructor.jpg" style="height: 300px; width: 400px; position: relative; top: 0px; left: 0px; "
The class is .galleryview. I have attempted to edit the .js files, and galleryview.css, but I can't get the slider to change dimensions.
Any help would be greatly appreciated!
Check your markup. Make sure there are no inline styles. You can also try:
.galleryview {
width: your-width-here !important;
}