I would like to reproduce this effect on a web page:
http://www.ronnysinc.com/gallery.html
On the example page whenever you click a different tab you get a different set of images to load in the same window. I figure this is achieved using CSS and floating layers on top of each other. I don't have a clue how to code a project like this but the effect is kick azz.
So CSS geru's, can any of you show example code to achieve this effect?
It's simple, you just need tabbed layout provided, for example, by popular and well known jQuery UI Tabs.
Quickstart
You will need to add links in your HTML document for jQuery itself, jQuery UI library and CSS theme for jQuery UI (all come with the initial zip package):
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>
then you should activate your tabs:
<script>
$(function() {
$("#animals").tabs();
})
</script>
and finally, you could enjoy your tabs in the site, here is the pattern for 3 tabs:
<div id="animals">
<ul>
<li>Fish</li>
<li>Birds</li>
<li>Lizards</li>
</ul>
<div id="fish">
. . .
fish content
. . .
</div>
<div id="birds">
. . .
bird content
. . .
</div>
<div id="lizards">
. . .
lizard content
. . .
</div>
</div>
All inside div's are welcome for your ccs-floats, images and whatever.
Also, you can explore the source code of the site to see the techniques and tricks (btw, I did find jQuery embedded there).
Related
I am using animate.css for my Web site and i used a bootstrap carousel slider it is searched on google and placed in my website. Its working fine But after that my animate.css is not working properly means all animated elements in the HTML page are animating when page loading.
ex: i am using fadeInRight animated class below the page but it is not working when i am going to page down and when i refresh the page at that particular element its working fine. please solve this
please check the site
If you want to Reveal Animations When You Scroll, this is what you're looking for:
http://mynameismatthieu.com/WOW/
CSS animations cannot be delayed based on the scroll position. So, first, you'll need to download and include the wow.min.js file to your page like this:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
And then add the animation to your html element by adding the class 'wow' followed by the animation name in animate.css:
<section class="wow slideInLeft">
</section>
For more advanced options related to timing the delay etc, refer: http://mynameismatthieu.com/WOW/docs.html
You can use wow.js for animating elements when it's on viewport area.
HTML:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
CSS:
<link rel="stylesheet" href="css/animate.css">
js:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
check the jquery plugin wow.js
I'm working on a site using Twitter Bootstrap, and want to put some content in a gray box or panel.
I mean much like the 'Basic block' example from bootstrap's own docs. Small screenshot cutout to display what I mean:
Except it's supposed to contain normal HTML content, no code or <pre> stuff or anything.
You can use a well for this. See docs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well well-sm">Well well well</div>
<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>
Even after changing width to 100%, it doesn't make it responsive. I am embedding this graph on WordPress website.
Put div around that iframe (as parent element), and set CSS "transform: scale(0.5)" to that div.
<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>
It will resize whole frame, including its content.
I have done a bit of looking around on the web for you and have several solutions. One of the most popular seems to be to use JQuery in order to resize the iFrame correctly.
A link to the script is found here: jQuery Responsive iFrame's
<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
var ri = responsiveIframe();
ri.allowResponsiveEmbedding();
</script>
<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
;(function($){
$(function(){
$('#myIframeID').responsiveIframe({ xdomain: '*'});
});
})(jQuery);
</script>
From there just make the iFrame have an ID of myIframeID or simply change the text in the script above to accommodate this.
Should this not work for you I would suggest using my Google Search string to finding other possible solutions: responsive iframe width
Good Luck!
i am using a slider js named as easySlider1.js for worspress. its working fine but till the time whole page is not fully loaded it show all the images of slider for a moment till the page is not loaded. as soon as page is fully loaded then it working fine.but it seems odd that it show all the images while page is in loading process. so please tell me how can i solve the problem. i want that all the images of slider should not show while page load. i try for it but cannot get the solution.so please tell me how can i solve the problem.
Thanks.
I don't know how the page looks like, but with the information you gave I came up with the following:
If the images are surrounded with a html-tag like div or p, then you can add css to hide the images while loading and show the images when the page is fully loaded.
If you have this:
<html>
<body>
<div id="image_gallery">
<img src="..." />
</div>
...
</body>
Then change it to this:
<html>
<body>
<div id="image_gallery" style="display:none;">
<img src="..." />
</div>
...
<!-- insert script just above the body endtag -->
<script type='text/javascript'>
jQuery('div#image_gallery').show();
</script>
</body>
jQuery must be loaded for this to work.
I have a vertical left menu in my asp.net page.
using jquery .load,i try to load other aspx page in the midlle div(content div)
depending on the link click.Like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx");
});
this solution doesn't work,i have followed the jquery doc.Do i should add some thing in mypage.aspx,all the examples i found i found googling don't work.
Can someone pls give me a working link or an example for that.
The best thing you can do (short of only responding with the requested content) is have a container in there, like this:
<div id="ContentDiv">
<div id="ContentInner">
</div>
</div>
This is to prevent multiple IDs in the page when doing the .load(). Since .load() takes a selector you'd then use that to get the content, like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx #ContentInner");
});
Now this loads only that inner <div> onto this page.
Some considerations to this approach you're taking:
Scripts/styles in the <head> won't be loaded
Be sure your <form> is inside that <div id="ContentInner">
You're embedding a full HTML document into a <div> element. The result will look like this:
<html>
<head>
.
.
</head>
<body>
<div>
<html>
<head>
.
.
</head>
<body>
.
.
</body>
<html>
</div>
.
.
</body>
</html>
The browser won't be able to do anything with that. Try loading your page in an <iframe> element instead of a<div>.