Im new to asp.net and javascript. Fairly educated about html and css. Im trying to complete my asp.net project but having problem with implementing javascript in my aspx page. im trying to create parallax scrolling using stellar.js but its not working.
here is the javascript code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.stellar.js"></script>
<script>
$.stellar({
scrollProperty: 'scroll',
});
</script>
and i have included this line in the head section of my home.aspx page
<script src="JScript.js" type="text/javascript"></script>
but it dosent work. Though it works fine in a simple html page.
Ps- im not using master page or content place holder in this page. It purely consists of html tags, not even one asp tool.
here's the content of home.aspx, if that helps. (and yes im a newbie)
<%# Page Language="C#" AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bon Voyage</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="JScript.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
<p><span style="color:Red; font-family:myFirstFont;">B</span>on <span style="color:Red; font-family:myFirstFont;">V</span>oyage</p>
HOME
<a href="#aaa" >HOLIDAYS</a>
FLIGHT
HOTELS
BUS
ABOUT
CONTACT US
LOGIN
</div>
<div id="container">
<div class="body1" >
<div class="onbody1">
<img class="icon" src="airplane-57-xxl.png"></img>
<hr width="62%" align="left"><p class="name">Bon Voyage</p> <hr width="62%" align="left">
<p class="desc">Your one stop shop for all your travelling needs.</p>
</div>
</div>
<div class="body2" data-stellar-background-ratio="0.3">
<p >asdadas</p>
</div>
<div class="body3">
<p id="aaa">asdadas</p>
</div>
</div>
</body>
and the css
body
{
width: 100%;
}
#font-face {
font-family: myFirstFont;
src: url(chocolate_hippo.ttf);
}
.header{
position:fixed;
background-color: #333333;
height:70px;
width: 100%;
text-align:right;
line-height: 70px;
z-index:3;
}
.header a{
text-decoration:none;
color: white;
font-weight: 100;
padding-right:20px;
}
.header a:hover{color:#909090 ;}
.header p
{
float:left;
padding-right:150px;
font-family: myFirstFont;
color:White;
font-weight:bold;
font-size:35px;
margin-left:12px;
}
/*--------Style for home page----------*/
.body1
{
background-image: url('imageedit_4_6588588848.jpg');
height:1000px;
background-size:100%;
background-repeat: no-repeat;
background-attachment:fixed;
}
.icon
{
margin-top:160px;
margin-bottom:30px;
margin-left:550px;
height:200px;
width:200px;
border:3px solid white;
border-radius:50%;
overflow: hidden;
transition-duration: 1s;
transition-property: transform;
opacity:0.9;
}
.icon:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
border:8px solid white;
border-radius:1px;
}
.name
{
color:White;
font-size:70px;
opacity:0.8;
margin-left:456px;
margin-top:20px;
border-top:2px solid white;
border-bottom:2px solid white;
-o-transition:background 0.8s ease-in-out;
-ms-transition:background 0.8s ease-in-out;
-moz-transition: background 0.8s ease-in-out;
-webkit-transition: background 0.8s ease-in-out;
}
.desc
{
font-size:30px;
margin-left:350px;
margin-top:20px;
color:White;
opacity:0.9;
}
.body2
{
background-attachment:fixed;
height:500px;
background-image: url('page-4_img01_original.jpg');
background-repeat:no-repeat;
background-size:100%;
}
.body3
{
height:600px;
}
Thanks in advance for all of yours answers.
you forgot to close the type attribute in first line
Related
I use the slick framework that allows me to have a carousel.
The problem is that on the second page of my carousel there is a css effect that starts. (code below)
The problem is that the css effect starts when the site is opened. So when I scroll the
caroussel the effect is already "past". I want the effect to start after clicking on one of the two
arrows (right and left).
I import the slick framework through url and saw that the button code is on
one of the url so I modify myself the button in my code (javascript).
After doing that nothing happens.
I do not understand !
Looking forward to an answer from you for my two problems.
Cordially.
/*(function() {
var slideContainer = $('.slide-container');
slideContainer.slick({
//id added to execute the function below
//https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js
//In this url you can see that prevArrow and nextArrow are the buttons
prevArrow: '<button id="prev" type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
nextArrow: '<button id="nex" type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
});
$("#prev, #nex").click(function() {
$(".expand").addClass("myeffect2");
});
*/
$(".slide-container").slick({
});
body {
background-color: black;
color: #9E9E9E;
}
.slide-container {
margin: auto;
width: 600px;
text-align: center;
}
.wrapper {
padding-top: 100px;
padding-bottom: 40px;
}
.wrapper:focus {
outline: 0;
}
.card {
background: white;
width: 300px;
display: inline-block;
margin: auto;
border-radius: 19px;
position: relative;
text-align: center;
-webkit-box-shadow: -1px 15px 30px -12px black;
box-shadow: -1px 15px 30px -12px black;
}
/***** Effect *****/
.expand-bg {
background: none repeat scroll 0 0 #e6e6e6;
border-radius:16px;
height: 16px;
margin-bottom: 5px;
}
.expand {
border-radius: 13px;
height: 12px;
margin: 2px;
position: absolute;
}
.myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}
#-moz-keyframes myeffect2 {
0% {
width:0px;
}
100% {
width:90%;
}
}
#-webkit-keyframes myeffect {
0% {
width:0px;
}
100% {
width:90%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slide-container">
<!--page1-->
<div class="wrapper">
<div class="card profile">
<div class="card__level card__level--profile">
<p>My name</p>
</div>
</div>
</div>
<!--end page1-->
<!--page2-->
<div class="wrapper">
<div class="card skills">
<div class="card__unit-name"</div>
</br>
<h3>My effect</h3>
<div class="expand-bg"> <div class="expand myeffect2"> </div> </div>
</div>
</div>
<!--end page2-->
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Scope the myeffect2 class or any class with an animation that you don't want to run unless the slide is active to the slick-active class.
Slick adds the "slick-active" class to slides that are in view.
.slick-active .myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}
I'm confused as to how I am supposed to make my posts disappear while scrolling...I want my posts to be like this http://yukoki.tumblr.com/page/4 (so once you scroll, it disappears like his black stary header for example). This is my theme http://macaiylaedwards.tumblr.com/ I'm basically using images as my header if thats the problem but there must be a solution. Tried making another wrap around the posts but it didn't work. I'll leave my coding here as well..thanks.
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title></title>
<link rel="shortcut icon" href="{Favicon} />"
<meta name="color:Sidebar Background" content="#000000" />
<meta name="color:Background" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
a:link, a:active, a:visited{
color: {color:Link};
color:#000000;
}
body{
color:#000000;
background-color:{color:bg};
background-image:url({image:background});
Background-attachment: fixed;
background-repeat:no-repeat;
background-size:cover;
margin:0;
word-wrap: break-word;
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.desc{
position:fixed;
margin-top:280px;
margin-left:860px;
width:400px;
height:300px;
font-family:0px;
letter-spacing:1px;
}
.nav{
position:fixed;
margin-top:300px;
margin-left:880px;
}
.pt{
width:500px;
margin-top:400px;
margin-left:700px;
background-color:#fff;
position:absolute;
padding:5px;
}
.pt2{
padding:10px;
background-color:#fff;
width:500px;
float:left;
margin:2px;
background-color:transparent;
}
.cutebox{
position:auto;
width:auto;
border:1px solid #292c34;
}
</style>
</head>
<body>
{block:More}READ MORE{/block:More}
<div class="desc">
{description}
</div>
<div style="position: fixed;width: 100%;z-index: 10;">
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/world_zpswu8twdm2.png" height=650 style="position:fixed;bottom:600px;left:750px;z-index:999"/>
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/888_zpsopwexxl4.png" height=210 style="position:fixed;bottom:720px;left:550px;z-index:999"/>
</div>
<select style="width: 200px; border: 0px solid; padding: 3px; color: #292c34; background-color: #f1f1f1; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; position:fixed;bottom:740px;left:880px;z-index:999" onchange='location=this.options[this.selectedIndex].value;' style='width:100px;'>
<option>Explore</option>
<option value="http://www.tumblr.com/home">Home</option>
<option value="http://www.tumblr.com/about">About</option>
<option value="http://www.tumblr.com/home/photography">Photography</option>
<option value="http://www.tumblr.com/contact">Contact</option>
<option value="http://www.tumblr.com/ask">Ask me</option>
</select>
<div class="pt">
{block:posts}
<div class="pt2"
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
<div class="cutebox">
{block:Caption}<center>{Caption}</center>{/block:Caption}
</div>
{/block:Photo}
</div>
{/block:posts}
</div>
</body>
</html>
Here is a basic example using some of the code from the tumblr that you linked to.
The template has a div at the top of the theme with the id of top:
<div id="top"></div>
This div has certain css properties, the important one being position:fixed (which means it is always in the viewport when scrolling.
#top {
background-image: url(http://38.media.tumblr.com/tumblr_m8nhk3w96X1r9g6hvo2_250.gif);
top: 0;
left: 0;
width: 100%;
height: 110px;
position: fixed;
z-index: 1001;
}
You have to specify the width when using fixed positioning so in this case set it to 100%. The item also has a height, so in this instance I have added the same amount of padding to the next element as the height of the top div. Otherwise the next element would be hidden beneath the fixed header.
jsfiddle: http://jsfiddle.net/lharby/6Lbtsfwx/
I'm fairly familiar with HTML and CSS, but for the life of me i cannot get this 'back to top' button to work on my tumblr page. I would really appreciate a keen eye to help me out here. I have added a JQuery code to enable the text to fade in and out when scrolling (infinite scroll past 100).
Thanks very much for your help.
L
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Video Corner Fold" content="red">
<meta name="font:Font" content="'BrownBold'">
<meta name="if:Show Captions" content="0"/>
<meta name="if:Uppercase Links" content="0">
<meta name="if:Fade On Hover" content="0">
<meta name="if:Show Tags on Index Page" content="0">
<meta name="image:header" content="0"/>
<style type="text/css">
#header {
width:100%;
height:100%;
background: url('{image:header}')no-repeat;
position:fixed;
margin: 15px 50% 0 50%;
top:0px;
left: -300px;
right: -300px;
z-index:9999;
}
body {
background-color:{color:Background};
font-family:{font:Font};
color:{color:Text};
font-size:17px;
line-height:25px;
}
a {
padding-bottom:2px;
color:{color:Text};
text-decoration:none;
border-bottom:2px solid;
}
img {
border: none;
border : 0;
outline:none;
}
a img {
outline: none;
}
iframe#tumblr_controls {
display:none;
}
#wrapper {
{block:PermalinkPage}
width:580px;
{/block:PermalinkPage}
position:relative;
margin: 50px auto;
}
#post {
padding:40px;
}
#post img {
width:100%;
}
#post img:hover {
{block:IndexPage}
{block:IfFadeOnHover}
opacity:0.5;
{/block:IfFadeOnHover}
{/block:IndexPage}
}
#post embed, #post iframe {
width:100% !important;
}
#post .photoset a:first-child {
display:block !important;
border:0 !important;
padding:0 !important;
}
#post .photoset a {
display:none;
}
.title {
width:100%;
text-align:center;
margin:auto;
position:fixed;
top:20px;
z-index:5000;
}
.follow {
position:fixed;
margin: 0px 30% 0 16.3%;
bottom:20px;
z-index:5000;
}
.archive {
position:fixed;
margin: 0px 20px 0 30%;
bottom:20px;
z-index:5000;
}
.message {
position:fixed;
bottom:20px;
left:20px;
z-index:5000;
}
.random {
position:fixed;
margin: 0px 0px 0 60%;
bottom:20px;
z-index:5000;
}
#toTop {
width:100%;
margin: 0px 0px 0 43%;
z-index:5000;
position:fixed;
display:none;
bottom:20px;
cursor:pointer;
}
.player {
background:#000;
}
ul.chat {
list-style-type:none;
padding:0;
margin:0;
}
#infscr-loading {
display:none !important;
}
.corner {
top:6px;
right:40px;
position:absolute;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
overflow:hidden;
z-index:4000;
}
.corner:before {
content:"";
position:absolute;
top:0px;
right:0px;
border-width:0 25px 25px 0;
border-style:solid;
border-color:#fff #fff {color:Video Corner Fold} {color:Video Corner Fold};
background:#fff;
display:block; width:0; /* Firefox 3.0 damage limitation */
}
{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
</head>
<body>
<div id="header"></div>
{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
<div class="title">{Title}</div>
<div class="archive">Archive</div>
<div class="message">Message</div>
<div class="follow">{block:PermalinkPage}{block:Posts}Reblog / {/block:Posts}{/block:PermalinkPage}Follow</div>
<div class="random">Random</div>
<div id="toTop">Back to top</div>
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}
<div id="wrapper">
{block:Posts}
<div id="post"
{block:IndexPage}
{block:Post1}style="width:380px"{/block:Post1}
{block:Post2}style="width:410px"{/block:Post2}
{block:Post3}style="width:500px"{/block:Post3}
{block:Post4}style="width:290px"{/block:Post4}
{block:Post5}style="width:320px"{/block:Post5}
{block:Post6}style="width:460px"{/block:Post6}
{block:Post7}style="width:530px"{/block:Post7}
{block:Post8}style="width:280px"{/block:Post8}
{block:Post9}style="width:340px"{/block:Post9}
{block:Post10}style="width:400px"{/block:Post10}
{block:Post11}style="width:260px"{/block:Post11}
{block:Post12}style="width:370px"{/block:Post12}
{block:Post13}style="width:520px"{/block:Post13}
{block:Post14}style="width:310px"{/block:Post14}
{block:Post15}style="width:250px"{/block:Post15}
{/block:IndexPage}
{block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
>
{block:Text}
{block:Title}{Title}{/block:Title}
{Body}
{/block:Text}
{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}<div class="description">{Description}</div>{/block:Description}
{/block:Link}
{block:Quote}
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
{block:Source}
<p>— {Source}</p>
{/block:Source}
{/block:Quote}
{block:Photo}
{block:IndexPage}<div style="border:none"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" border="0"/></div>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photo}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{/block:Chat}
{block:Video}
{block:IndexPage}<div class="corner"></div>{/block:IndexPage}
<div id="video">
{Video-500}
</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}
{block:Photoset}
{block:IndexPage}<div class="photoset">{block:Photos}<img src="{PhotoURL-HighRes}">{/block:Photos}</div>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photoset}
{block:Audio}
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}
{block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}#{Tag} {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}#{Tag} {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage}
</div>
{/block:Posts}
{block:NextPage}<div id="page-nav">{/block:NextPage}
</div>
</body>
</html>
The #header element sits above .archive, #toTop and .random due to its higher z-index (5000 / 9999).
If you make the following change, #toTop is clickable and works as desired:
#header {
width: 100%;
height: 100%;
background: url('http://static.tumblr.com/e72d71d9df861d718427e82229f48499/yo2ke79/iMEn5bbly/tumblr_static_9kpmrzvkfosoo4o0g8k4g80oc.png')no-repeat;
position: fixed;
margin: 15px 50% 0 50%;
top: 0px;
left: -300px;
right: -300px;
z-index: 4999;
}
There is another error though. It seems two versions of jQuery are being requested:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
The later, http://masonry.desandro.com/js/jquery-1.7.1.min.js, fails as it can't be found. I can't see why you need two versions of jQuery or why you are hot linking.
Either use a CDN (like the first link) or upload the javascript directly to Tumblr's own CDN.
Instead of messing around with scrollTop, just use a link.
Scroll to Top
This will take you straight back to the top. Admittedly no animations but if you're just looking for basic functionality then it's perfect.
I am trying to create cloud tags in html.I am able to create them using ul tag and applying css on them.Following is my cloud tag image:
Now i want effects like that, when i move my mouse to any of the text(i.e any cloud tag),say "Learn java" tag it should zoom out and when i move my mouse out of it it should go back to its place. I have seen this functionality on many websites.
following is my code in HTML file :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#java").hover(function(){
alert("You entered on java cloud tag!");
},function);
});
</script>
<title>Css Globe: tag clouds</title>
<style>
body {
margin:0;
padding:0;
background:#e1e1e1;
font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
a{color:#3c70d0;}
h1{
font-size:180%;
font-weight:normal;
margin:0 20px;
padding:1em 0;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:500px;
}
#container{
margin:0 auto;
text-align:left;
width:700px;
background:#fff;
}
#main{
float:right;
display:inline;
width:380px;
margin-left:20px;
}
#side{
float:left;
display:inline;
width:260px;
margin-left:20px;
}
#footer{
clear:both;
padding:1em 0;
margin:0 20px;
}
/* Tag cloud */
.tags ul{
margin:1em 0;
padding:.5em 10px;
text-align:center;
background:#71b5e9 url(bg_tags.gif) repeat-x;
}
.cld{
height:100px;
width:400px;
}
.tags li{
margin:0;
padding:0;
list-style:none;
display:inline;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
}
.tag1{font-size:100%;}
.tag2{font-size:120%;}
.tag3{font-size:140%;}
.tag4{font-size:160%;}
.tag5{font-size:180%;}
/* alternative layout */
.tags .alt{
text-align:left;
padding:0;
background:none;
}
.tags .alt li{
padding:2px 10px;
background:#efefef;
display:block;
}
.tags .alt .tag1,
.tags .alt .tag2,
.tags .alt .tag3,
.tags .alt .tag4,
.tags .alt .tag5{font-size:100%;}
.tags .alt .tag1{background:#7cc0f4;}
.tags .alt .tag2{background:#67abe0;}
.tags .alt .tag3{background:#4d92c7;}
.tags .alt .tag4{background:#3277ad;}
.tags .alt .tag5{background:#266ca2;}
/* // Tag cloud */
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body> <!--******************************************************************************-->>
<div id="container">
<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
<div id="side">
<h2>Side column (Tag Cloud)</h2>
<div class="tags">
<ul class="cld">
<li class="tag1" id="java">Learn java</li>
<li class="tag2">Find Markets</li>
<li class="tag3">sitemap</li>
<li class="tag2">Sales</li>
<li class="tag4">Gohome</li>
<li class="tag1">Movies</li>
<li class="tag1">It Jobz</li>
<li class="tag5">Gym</li>
<li class="tag2">Sea food</li>
<li class="tag1">Hospital</li>
<li class="tag3">Smart phone</li>
<li class="tag4">Pizza </li>
<li class="tag1">Aerobics</li>
<li class="tag5">Electronics</li>
<li class="tag1">Anti-Virus</li>
<li class="tag2">Travel</li>
</ul>
</div>
</div>
</div>
</body>
</html>
,So please give some solution to achive this.
Thank you in advance.
just use css3 transform scale property
.element{
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);
-transform:scale3d(1,1,1);
-webkit-transition:300ms ease-in-out all;
-moz-transition:300ms ease-in-out all;
transition:300ms ease-in-out all;
}
.element:hover{
-webkit-transform:scale3d(1.4,1.4,1.4);
-moz-transform:scale3d(1.4,1.4,1.4);
transform:scale3d(1.4,1.4,1.4);
}
demo:http://jsfiddle.net/raJwX/
**
Update:
**
Demo: http://jsfiddle.net/raJwX/1/
.tags li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);
-transform:scale3d(1,1,1);
-webkit-transition:300ms ease-in-out all;
-moz-transition:300ms ease-in-out all;
transition:300ms ease-in-out all;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li:hover{
-webkit-transform:scale3d(1.4,1.4,1.4);
-moz-transform:scale3d(1.4,1.4,1.4);
transform:scale3d(1.4,1.4,1.4);
}
This is what you want. - JS Fiddle
Add to CSS:
.tags ul li {
-moz-transition: font-size 0.2s;
-webkit-transition: font-size 0.2s;
transition: font-size 0.2s;
}
Replace jQuery with:
$(document).ready(function(){
$("#java").hover(function(){
$(this).css({'fontSize': '150%'});
}, function(){
$(this).css({'fontSize': '100%'});
});
});
Adjust sizes/timings/etc as appropriate.
Cheers.
CSS "transform" property is what you are looking for that this will help you out to achieve this.
However I just took your code and made changes in two CSS classes
.tags li a{
text-decoration:none;
display:inline-block;
-webkit-transition: all .2s ease-in-out;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
-webkit-transform: scale(1.3);
}
For reference http://jsfiddle.net/yNt6X/3/
Hope you gets what you are looking for.
P.S. I have just added css for webkit browser.
Animate method can be used with best effect as used in following link
$(this).animate({width: "500px"}, 'slow');
Above method is called on mouseover and mouseout function on html element.
http://jsfiddle.net/jquerybyexample/nPeaV/
Using jQuery .css() property you can change font size to smaller which make an effect of "zoom out" but actually the font is only smaller.
Example
<script>
$(document).ready(function(){
$("#java").hover(function(){
$("#java").css('font-size', "10px");
});
});
</script>
Also, when you out of hovering "Learn Java" you can use the event onMouseOut to return the font to his normal font size.
Example
<script>
$(document).ready(function(){
$("#java").mouseout(function(){
$("#java").css('font-size', "18px"); // Assuming that normal font is 18px.
});
});
</script>
Fiddle
My code works perfectly with all browsers except IE. I tried every solution I could find on the forums with no luck. I am still learning JavaScript, so I will learn jQuery later. The issue is that in IE the slides appear vertically with no effect. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet...css" rel="stylesheet" type="text/css" />
<title>div test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var slider = $('#slider1').bxSlider({
controls: false
});
$('#bx-prev').click(function () {
slider.goToPreviousSlide();
return false;
});
$('#bx-next').click(function () {
slider.goToNextSlide();
return false;
});
});
</script>
</head>
<body>
<div id="slider1">
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>page3</div>
<div>page4</div>
</div>
<div id="bx-next">next</div>
<div id="bx-prev">prev</div>
</body>
</html>
And here is my style sheet:
div#head {
width:100%;
height:100px;
/*background-color:antiquewhite;*/
margin-bottom:100px;
}
div#content {
border-left: 2px solid #F0F8FF;
border-right: 2px solid #8a815d;
border-top: 2px solid #8a815d;
border-bottom: 2px solid #8a815d;
width:400px;
height:300px;
-webkit-border-radius: 0px 28px 20px 0px;
-moz-border-radius: 0px 28px 20px 0px;
border-radius: 0px 28px 20px 0px;
font-family:Arial,Helvetica,sans-serif;
color:#8a815d;
padding-left:100px;
background-color:#F0FFFF;
background-color: rgba(215,227,211,0.3);
position:relative;
top:20px;
left:0px
}
div#wrapper {
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}
div#main {
/* background-color:black;*/
width:50%;
height:360px;
float:left;
}
div#rash {
float:right;
/*background-color:blue;*/
height:360px;
width:50%;
}
body {
background-color: #E8F3F9;
background-image: url('squares layer.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
/*next button*/
#bx-next {
position:absolute;
top:45%;
right:3px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_next.png) no-repeat 0 -30px;
}
/*previous button*/
#bx-prev {
position:absolute;
top:45%;
left:4px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_prev.png) no-repeat 0 -30px;
}
I am also having a similar problem, and I have not yet come to the conclusion but from what I have figured out so far is that to debug this problem you should start out by validating your code. http://validator.w3.org/ I copied your code and it said you had 5 errors so I think a start would be fixing these errors because IE is very picky and if you have any errors if could effect your formatting. Also I know that IE is picky about the Doc Type at the top of your code and if it is not correct it can also effect the formatting of the page. If I can get my similar problem fixed I will let you know because it is most likely the same problem you are having.
<div id="wrapper"> is defined twice. An ID needs to be unique for every element on your page. Same goes for <div id="head">, <div id="main">, <div id="content"> and <div id="rash">.
Also, have you tried debugging it in the IE console? Try and see if the console logs any errors at runtime. Then get back to SO and post those errors.
Cheers.