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;
}
Related
I used some code to display a gif before my page load but it is
increasing my page's loading speed...
Here is where I use that code - http://sarkarinaukrihome.com/
JS
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("fast");;
});
HTML
<div class="se-pre-con"></div>
CSS
.no-js #loader {
display: none;
}
.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(Preloader_2.gif) center no-repeat #fff;
}
You must resize to the exact desired dimensions of your HTML container and compress all images.
If you look closely at your network flow, you lose a lot of time to load all the images.
If you analyze the performance of your website, Google Chrome gives you recommendations and you have precisely this point mentioned with the possible gain if you perform the suggested actions.
To use the LightHouse Viewer of Google Chrome, read this
For the theoretical concept of image compressing, you can read this
To compress different images, you can use services like this
You can see in the picture below the differents loading times of your website's files...
Your image quiz.png seems quite fat so it will take some time to load it...
As you just use it in a small format, you maybe should reduce its size ! ;)
Also, notes that your website is searching for some LOGO.png that it doesn't find ... ( doesn't really matters though )
With chrome's inspector :
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 have several apps inside iframes in the page that consolidates the apps (it acts as an app container).
I want to add a button somewhere that can expand and collapse the iframes to full size of the page.
The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.
Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.
I can't use HTML5 since we need to support IE7.
An example.
Basically, just give your expanded iframe these CSS attributes,
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
and it will fill its (relative) parent.
Source: "Full screen" <iframe>
You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.
If I were you, I might code it as (using jQuery):
$('iframe#myid').click(function() {
$('iframe#' + current).removeClass('current');
$('iframe#myid').addClass('current');
var current = '#myid';
});
with the CSS code as:
body, iframe {
margin: 0px; //to normalize the default stylesheet applied by the browser
}
iframe.current {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
}
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";
Take a look at my website: http://homegym.sg/index.php/weight-tree-rack.html
If you mouseover the "more view" words under the product image, an additional images box will appear. Normally it's appearing normally in the center. However when i make my window size smaller, the position of the box will change.
I am using slideviewerpro script and i believe it is the one positioning the box but i am not able to tackle the problem. Here is the source of the script: http://homegym.sg/skin/frontend/default/electronics01-black/js/jquery.slideViewerPro.1.0.js
I believe the additional image box is in div#thumbSlider, have did some try and error modification of the js file but failed to solve the problem.
Ok. First of all, your div with width:660px; in product-img-box needs to have position:relative; added to it. Then you need to change the following rule
.product-view .product-img-box #ui0 {
position: absolute;
top: 600px;
left: 580px;
height: 60px;
}
to
.product-view .product-img-box #ui0 {
position: absolute;
height: 60px;
left: 50%;
margin-left: -200px;
margin-top: 15px;
}
widgets.css:589
And then just tweak from there. :)