I am trying to get custom tooltip over image. but during run time it says "method or property tooltip not defined"
here is my code
<script src="/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#content img[title]").tooltip();
});
</script>
<style type="text/css" >
.tooltip
{
display:none;
background:transparent url(Images/blackarrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#eee;
}</style>
</asp:Content>
<div id="content"> <img alt="" src="Images/help1.png" title="Your help comes here" /></div>
Try to include the plugin directly from the developer, just for test. If works, there is some problem with your code.
I've removed the [title] from <img>, if you really need it, put it again.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#content img").tooltip();
});
</script>
<style type="text/css" >
#tooltip {
width:160px;
height:70px;
background:transparent url(Images/blackarrow.png) #eee;
z-index: 3000;
border: 1px solid #111;
opacity: 0.85;
font-size:12px;
padding:25px;
color:#eee;
position: absolute;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
<div id="content">
<img alt="" src="Images/help1.png" title="Your help comes here" />
</div>
Related
I need a popwindow on click or onfocus of the dropdown . In the popwindow I should display the checkboxes with multiselect option.I searched for this kind but I couldn't find any references.
Can anyone write code for this using jQuery.
Thank you
Try this code... hope it helps
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pop
{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#container
{
position: relative;
width:500px;
margin:100px auto;
background-color: white;
border-radius: 10px;
padding: 20px;
}
#ddown
{
width:100px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">
</script>
<title></title>
</head>
<body>
<select id="ddown" >
<option></option>
</select>
<div id="pop" >
<div id="container">
<h1>Some Check box here</h1>
</div>
</div>
</body>
<script type="text/javascript">
$("#ddown").on("click",function(event){
event.preventDefault();
$("#pop").show();
})
$("#pop").click(function(){
$("#pop").hide();
})
</script>
</html>
Im trying to make a photo grid like this
http://jasonalvis.co.uk/portfolio/savile-row-company/
grids at below should work as link to the corresponding photo and description. thanks
Well, you could do something like this...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// On mouseover, change the height, and margin-left/top
$('.article').on('mouseenter', this, function() {
$(this).find('img').stop().animate({
"height": 400,
"margin-left": '-50px',
"margin-top": '-50px'
}, 500 );
});
// On mouseleave, everything goes back to normal :)
$('.article').on('mouseleave', this, function() {
$(this).find('img').stop().animate({
"height": 300,
"margin-left": 0,
"margin-top": 0
}, 500 );
});
});
</script>
And this styles
<style>
.container {width:1280px; margin: 0 auto;}
.article {width:300px; height: 300px; float:left; position:relative; overflow: hidden; margin: .5em;}
.article .image img {width:auto; height:300px; display:block;}
.article .info {position:absolute; left:0; bottom:0; width:100%;}
.article .info h2, .article .info p {color: #f0f0f0; font-family: Arial, Verdana, serif;}
</style>
And you could use this HTML structure:
<div class="container">
<article class="article">
<a href="#">
<div class="image"><img src="http://s12.postimg.org/hh8y6d8d9/1280x490_1.jpg" alt="image"></div>
<div class="info">
<h2>Title</h2>
<p>Excerpt</p>
</div>
</a>
</article>
<!-- Repeat the article -->
</div>
An example here: http://jsfiddle.net/2eap6srL/
Here JSFiddle example.
If you want to this will work on your page, you have to include Bootstrap, simply copy and paste following code to your head tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Please read more about Bootstrap here.
I have been learning Jquery and i made a small banner that animates out, and back in giving information. But, i would like it to be on a timed loop; ie. It runs the animation every 5 mins.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
do {
var i = 1
$(document).ready(function(){
$("#twitter").delay(200).animate({left:'225px'}, "slow").delay(5000).animate({left:'-225px'}, "slow");
$("#tag_line").delay(300).fadeIn(2000).delay(2500).fadeOut(1000);
$("#content").delay(1000).slideDown("slow").delay(3000).slideUp("slow");
var box=$("#box");
box.animate({width:'toggle'},"normal").delay(500);
box.animate({height:'180px'},"slow").delay(3000);
box.animate({height:'100px'},"slow").delay(750);
box.animate({width:'toggle'},"normal").delay(3000);
});
}
while (i < 2)
</script>
<style>
#twitter
{
height:100px;
width:140px;
position:absolute;
z-index:20;}
#box
{
background:lightgrey;
height:100px;
width:350px;
opacity:0.2;
display:none;
position:absolute;
z-index: 10;
border-style: outset;
border-width: large;
border-color: black;
}
#container {
width: 100px;
height: 100px;
position:absolute;
}
#tag_line {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic";
color: red;
}
#content {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
padding-top:90px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic"
}
</style>
<title>Test Jquery</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="tag_line"><h1>Twitter</h1></div>
<div id="twitter"><img src="img/logo/twitter.png" width="140" height="100"></div>
<div id="content"><h2>#Geekster_Alan</h2></div>
<div id="box"></div>
</div>
</body>
</html>
How would i get it too loop?
Also, if you see anything wrong with the general code it would be appreciated if you point it out! I am new to Jquery, JS and HTML/CSS so positive criticism will help me learn!
Thanks!
You can use the setInterval function to execute your code every X ms
See details here: http://www.w3schools.com/js/js_timing.asp
I'm just starting to learn about jQuery and I believe I have run into a road block. Essentially what I have is a that represents a clickable area with an inside. So I'm trying to use this code:
$(document).ready(function(){
$('#side_menu_icon').click(function(){
$('#side_menu').slideToggle('slow');
});
});
Where #side_menu_icon is the clickable area and #side_menu is just a placeholder with width,height, and color temporarily. By default I've set this <div> to display:none; because the example I was looking at did the same thing, assuming the jQuery function would set it to visible. When I click the area nothing happens, I've tried attaching the #side_menu_icon to both the <img> and the <div>. I think there might be something I don't understand about the and how documents inherit the code from one another so I'll include that as well:
<head>
<link rel="stylesheet" type="text/css" href="style/main.css"></link>
<script type="text/javascript" src="js/jquery-1.10.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Test Blog Site</title>
</head>
main.js is the file that calls the jQuery functions above.
Thanks for your time, I hope this is enough information for a solution.
EDIT:
Cut down version of HTML:
<body>
<div id="top_bar">
<h1 style="padding-left:1em;">Title</h1>
</div>
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
<div id="side_menu">
</div>
<div id="post_holder">
<img style="margin-bottom:-5px" src="images/post-collection-top-transparent.gif" />
<div id="post_collection">
<!-- stuff -->
</div>
<img src="images/post-collection-bottom-transparent.gif" />
</div>
</body>
Relavent sections being
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
and
<div id="side_menu">
</div>
CSS:
body {
font-family: "Courier New";
background-image: url("../images/background-1728x1080.jpg");
background-size:100%;
background-attachment:fixed;
margin: 0;
}
img {
max-width: 100%;
width: auto;
height: auto;
outline-offset:0px;
}
h1,h2,h3,h4,h5,h6,div,p{
padding:0;
margin:0;
}
.post{
width:90%;
padding-left: 5%;
}
#top_bar{
width: 100%;
z-index:99;
position: fixed;
font-size:15px;
background-image: url("../images/item-background.jpg");
background-size:6%;
color: white;
}
#side_menu_icon{
border: 4px solid #6e3b10;
margin-top: 50px;
position:fixed;
right:0;
background-image: url("../images/item-background.jpg");
}
#post_holder{
z-index:98;
text-align:center;
margin:0;
position:relative;
}
#post_collection{
background-image: url("../images/post-background.gif");
background-size: 100%;
max-width: 900px;
text-align:left;
margin: auto;
}
#side_menu{
height:500px;
width:100px;
background-color:yellow;
display:none;
}
Relevant parts being #side_menu and #side_menu_icon I guess.
I found the solution to my question, some of the CSS was disrupting jQuery's ability to work properly. I will just have to find some way around that.
I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
<script src="http://code.jquery.com/jquery-latest.js">
with
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
and I think you should be fine
Your code is to show the div if it is already hidden and show if it is not visible.
Your else condition is always being executed so the video div will be always hidden.
Change the $("#video").hide(); to $("#video").fadeOut("slow"); then you can see it is going away when the dom finished loading.
IF you want to show the vide div, hide the div initially. So that it will be displayed
<div id="video" style="display:none;">
<h3>Video div content </h3>
</div>
</div>
jsfiddle sample for that : http://jsfiddle.net/uzARd/4/
Why dont you just use $("#video").slideToggle(); instead of the if else check?
and also set the display:none property initially
use seperate script tag for both like
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown('slow');
}
else {
$("#video").hide();
}
});
</script>