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
Related
I'm working on blogger and I've been trying to make a menu with some dropdowns using JQuery but for some reason it isn't working on Blogger, in my pc it works just fine. I've added the scripts and the style to the page HTML and then I placed the body on a HTML block but it doesn't work there.
Picture from the blog structure with the HTML Block
Here's the demo I'm using on my pc.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.menu {
padding:10px 0;
width: 500px;
}
.menu ul {
list-style-type:none;
margin:0;
padding:0;
}
.menu ul li {
display:inline-block;
position:relative;
}
.menu ul li ul {
background-color:rgb(225,75,75);
position:absolute;
left:0;
top:40px; /* make this equal to the line-height of the links (specified below) */
width:200px;
}
.menu li li {
position:relative;
margin:0;
display:block;
}
.menu li li ul {
position:absolute;
top:0;
left:500px; /* make this equal to the width of the sub nav above */
margin:0;
}
.menu a {
line-height:40px;
padding:0 12px;
margin:0 12px;
}
.menu a {
color:#000;
text-decoration:none;
display:block;
}
.menu a:hover,
.menu a:focus,
.menu a:active {
color:rgb(255,00,00);
}
/* style sub level links */
.menu li li a {
border-bottom:solid 1px rgb(200,50,50);
margin:0 10px;
padding:0;
}
.menu li li:last-child a {
border-bottom:none;
}
/* show arrows for dropdowns */
.menu li.dropdown > a {
background-image:url('../img/arrow-down.png');
background-position:right 20px;
background-repeat:no-repeat;
}
.menu li li.dropdown > a {
background-image:url('../img/arrow-right.png');
background-position:right 16px;
background-repeat:no-repeat;
}
/* hide sub menu links */
ul.sub-menu {
display:none;
}
</style>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.sub-menu').slideDown(200,stop());
},
function(){
$(this).children('.sub-menu').slideUp(200,stop());
}
);
function stop(){
$('.sub-menu').stop(true, true);
}
});
</script>
</head>
<body>
<div class="menu">
<ul >
<li>Home</li>
<li class="dropdown">Streams
<ul class="sub-menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</li>
<li>Guides</li>
<li>Reports</li>
</ul>
</div>
</body>
</html>
Edit:
I've also trying making an alert in the JQuery function and when the mouse passed over the menu the alert appears but the dropdown doesn't.
The answer to my own question is... Blogger's gadget for HTML/Javascript block applies some css that was making the bar not show up. You can either find a way to remove the css from the gadget or simply place your HTML code on the HTML page.
My h1 tag link appear a blue underline that I did not add.I already set text-decoration to none,but it still appear a blue line when hover.Here is my code.
CSS
h1{
font-family:'Oxygen';
color:#000;
font-size:100px;
text-align:center;
margin-top:80px;
font-weight:50;
border:5px black solid;
text-decoration:none;
}
h1:hover{
color:#fff;
border:5px solid white;
text-decoration:none;
}
#h1{
height:100px;
width:600px;
margin:auto;
}
HTML
<div data-speed="1.2" data-type="background" id="search-background" class="clearfix" style="background-attachment:fixed;">
<div id="h1">
<h1>Joomgame</h1>
</div>
<p>Front-End Devoloper</p>
</div>
Give the text-decoration to the a http://jsfiddle.net/725tenf1/
#h1 a{
text-decoration:none;
}
That's because it's inside the <a> tag
Use this CSS:
a > h1 {
text-decoration: none;
}
What I'm trying to do is create a drop down menu to use on a mobile website. Since you can't hover over a menu item to see the submenu, i need to get around that problem. I've researched this and attempted to solve this problem. A lot of sites recommend using JS with the onclick function. I cant get a grip of it. Thanks.
Here is the HTML.
<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<div class="smenu_div">
<ul>
<li>Menu
<ul>
<li>Home</li>
<li>Illustrator</li>
<li>Web Design</li>
</li>
</ul>
</ul>
</div>
</body></html>
Here is CSS.
/*Small Menu*/
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
float:right;
overflow:hidden;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#000000;
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
}
.smenu_div li ul:active{ display: block; }
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
display:block;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
color:#000000;
background:#fdff30;
}
I can barely get your question, but for creating menus to use in websites for small screen with html and css, try http://css-tricks.com/convert-menu-to-dropdown/
just adjust the CSS within the onclick function.
HTML:
<div id="menuclick">Click to show menu</div>
<div id="hiddenMenu" style="display: none;">
TEXT GOES HERE
</div>
JavaScript:
var hidden = true;
document.getElementById('menuclick').onclick = function() {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
working example: http://jsfiddle.net/F5nJT/1/
if you want a floating menu you'll want to play with the css position of the element so that it doesn't cause the document to reflow when its display changes.
Hey Everyone is i have an social bar that i made with CSS and html and i was wondering instead of making it show Quickly how would i implement JavaScript so i can pick the speed that the image slides up This is my code
CSS
.sharing-cl {
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.sharing-cl a {
overflow:hidden;
width:75px;
height:30px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url("http://theirondoor.x10.bz/V2/images/share-sprite.png") no-repeat;
}
a.sh-Youtube {
background-position:-214px -40px;
}
a.sh-Twitter {
background-position:-61px -40px;
}
a.sh-Rss {
background-position:-143px -40px;
}
a.sh-Facebook {
background-position:20px -40px;
}
a.sh-Youtube:hover {
background-position:-214px 1px;
}
a.sh-Twitter:hover {
background-position:-61px 1px;
}
a.sh-Rss:hover {
background-position:-143px 1px;
}
a.sh-Facebook:hover {
background-position:20px 1px;
}
#text {
margin-top:3em;
font-weight:bold;
font-family:helvetica, arial, sans-serif;
}
#text a {
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
HTML
<ul class="sharing-cl" id="text">
<li></li>
<li><a class="sh-Facebook" href="">Facebook</a>
</li>
<li><a class="sh-Twitter" href="">Twitter</a>
</li>
<li><a class="sh-Rss" href=""> Rss Feed</a>
</li>
<li></li>
<li><a class="sh-Youtube" href="">Youtube</a>
</li>
</ul>
Here is the jsFiddle -> http://jsfiddle.net/Kf5CS/
a.sh-Facebook {
background-position:20px -40px;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
So, as you can see, you should use "transition" property to let you icons move, you can setany duration you want in "duration" property
I wondered whether someone might be able to help? I've tried and tried to find a solution myself, but nothing seems to work.
I have a horizontal list and when the user clicks on one of these links, a hidden div appears just below the list, filling the width of the overall container (950px).
This works absolutely perfectly on Firefox, Safari and IE8 but doesn't seem to work on IE7 (and possibly less, I haven't been able to check).
In IE7, the div causes the list to break, plonking the final list item on an extra line and (as a result, I presume?) pushing the div further down the page, so it's not flush with the bottom of the list. In fact, it appears just beneath the div with ID "highlightsbar".
Here is the relevant code - I'd be eternally grateful for any suggestions anyone might have!
You can see this problem 'in action' at http://www.totalbackpacker.co.uk. (Interestingly, if I do a quick test with only the relevant bits of code at http://www.martinjefferies.co.uk/test.html, the problem isn't there. I'm not sure if that helps or not?!)
Thanks,
Martin
HTML:
<div id="outer">
<div id="wrapper">
<div id="header">
</div>
<div id="navbar">
<ul>
<li class="left"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></li>
<li class="right"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></li>
<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">
<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br />Close menu
</div>
</div>
</ul>
<div class="clearer"></div>
<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->
<div id="content">
</div>
</div>
</div>
CSS:
#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}
#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}
#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}
#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}
#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}
#navbar li {
float:left;
}
#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#navbar li a:hover {
background:#cc0000;
}
#navbar img {
border:0;
}
#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}
#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}
#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}
.clearer {
clear:both;
}
#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}
#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}
#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}
#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}
JavaScript:
<script type="text/javascript" language="javascript">
function toggle(id)
{
el = document.getElementById(id);
var display = el.style.display ? '' : 'none';
el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}
</script>
If you pull it out and it works then it must be something in the surrounding code.
The most common issue with non javascript IE compatibility is IE will treat extra open tags and close tags differently than other browsers.
I suggest you look very closely at the html, or selectively add back HTML till you can reproduce.
I suggest you look into using conditional-includes for IE7 (forget about IE6 if at all possible). Here's a jsFiddle of the code I got working in my copy of IE7: http://jsfiddle.net/qjx4g/2/
What happened is that you shouldn't have your submenu code within your #navbar <ul> (i.e., close your #navbar (</ul>) and then put in your submenu's code) and whenever I have problems with a container with position: relative that contains content that is floated, I change the container to use position: absolute and work from there (only in a conditional-include for IE7).
1 - If you give your ul a width of 100%, it solves the problem of the last list item "About" pushing itself down to a second line.
2 - Close your ul . In IE9 the div#submenu is a child of ul, while in IE7 it is the child of the last li
3 - div#navbar{ position: relative;} - div#submenu{position: absolute; top: 15px; right: 1px;} - Works on IE7
pic
Here's the solution I came up with.
Firstly, I created an extra div for the submenu - called #submenu-outer:
#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}
Then I made #submenu appear in the centre of the 100% outer div:
#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px;
text-align:left;
}
Et voila! Thanks to everyone who helped along the way! :)