I am trying to show Jquery UI tooltip on page load with a close/cross mark icon inside tool tip content. Tooltip should be closed on clicking X icon. I dont want to use any plugins. Please suggest logic.
Tried the below code to hide tooltip after 5 seconds.
var dur=5000;
$(document).tooltip({
show:{
effect:'slideDown'
},
track:true,
open: function( event, ui ) {
setTimeout(function(){
$(ui.tooltip).hide();
}, dur);
}
});
Tried below code to Show tooltip
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$(document).tooltip({
position: {
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
</script>
<style>
.ui-tooltip, .arrow:after {
background: black;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
font: 8px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 80%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>
</head>
<body>
<p title="Sample Tool Tip Text">Tooltips</p>
</body>
</html>
If you want to use the tooltip in this manner, you cannot use $(document).tooltip(). Instead, you would have to use $(selector).tooltip().focus(), which will force the tooltip open.
Then you would need to bind a click event and do the following: $(selector).tooltip("destroy").
Using your jsfiddle, I've done the following changes:
HTML:
<p id="p1" title="Sample Tool Tip Text">Tooltips</p>
JAVASCRIPT:
$(function () {
$("#p1").tooltip({
items: "p", //use this to override content - in this example, I am using "p" but you can also use classes/id's/etc
content: function (){
if ($(this).is("p") ) {
var text = $(this).attr("title");
return text + '<span style="position:absolute;top:0;right:0;" class="tooltipClose ui-icon ui-icon-circle-close"></span>';
}
},
position: {
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).focus();
$(".tooltipClose").click(function(){
$("#p1").tooltip("destroy");
});
});
Here is a demo: http://jsfiddle.net/u8kX9/9/
Hope this is what you're looking for! Let me know if you need anything else!
Related
I am working on the snippet below. Why am I not able to attach the .box to ui handler?
$("#slider").slider({
min: 100,
max: 500,
step: 1,
value: 200,
animate: 'slow',
create: function() {
$('.box').appendTo($('#slider a').get(0));
},
slide: function(event, ui) { $(ui.handle).find('span').html( ui.value); }
});
// only initially needed
$('.box').html($('#slider').slider('values', 0)).position({
my: 'center top',
at: 'center bottom',
of: $('#slider a:eq(0)'),
offset: "0, 10"
});
body{
padding:60px;
}
#slider
{
width: 80%;
margin-left: 1em;
}
#slider a {
text-decoration: none;
outline: none;
}
.box {
position: relative;
width: 50px;
background: #FFF;
border: 1px dashed #666;
text-align: center;
width: 100%;
color: #303030;
padding: 8px 3px 9px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding:12px 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div id="slider"></div>
<span class="box"></span>
The element .box is currently attached to the <body>. If you want to position it, you only need to use .position() properly.
Exmaple:
$(function() {
$("#slider").slider({
min: 100,
max: 500,
step: 1,
value: 200,
animate: 'slow',
slide: function(event, ui) {
$(".box").html(ui.value).position({
my: "center top",
at: "center bottom+10",
of: $(".ui-slider-handle", this)
});
}
});
// only initially needed
$('.box').html($('#slider').slider('values', 0)).position({
my: 'center top',
at: 'center bottom+10',
of: $("#slider .ui-slider-handle")
});
});
body {
padding: 60px;
}
#slider {
width: 80%;
margin-left: 1em;
}
#slider a {
text-decoration: none;
outline: none;
}
.box {
position: relative;
width: 50px;
background: #FFF;
border: 1px dashed #666;
text-align: center;
width: 100%;
color: #303030;
padding: 8px 3px 9px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 12px 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div id="slider"></div>
<span class="box"></span>
Update
If you want the handle to be the box, try this.
HTML
<div id="slider"></div>
CSS
.ui-slider span.ui-slider-handle {
width: 50px;
background: #FFF;
border: 1px dashed #666;
text-align: center;
color: #303030;
padding: 8px 3px 9px;
text-align: center;
padding: 12px 12px;
}
JavaScript
$(function() {
$("#slider").slider({
min: 100,
max: 500,
step: 1,
value: 200,
animate: 'slow',
slide: function(event, ui) {
$(".ui-slider-handle", this).html(ui.value);
}
});
$("#slider .ui-slider-handle").html($("#slider").slider("value"));
});
want to have parallax effect for that I am using plugin.currently I am using enllax.js for parallax effect as plugin but not getting any effect of parallax.Can any one tell me what's wrong in code.
Thanks in advance.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title>
<title>jQuery Parallax Plugin Demo</title>
<link rel="stylesheet" href="s.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="scripts/jquery.enllax.js"></script>
<script type="text/javascript">
(function($){
//Plugin activation
$(window).enllax();
$('#a').enllax();
$('#first').enllax({
type: 'background', // 'foreground'
ratio: 0.5,
direction: 'vertical' // 'horizontal'
});
$('#second').enllax({
type: 'background', // 'foreground'
ratio: 1.0,
direction: 'vertical' // 'horizontal'
});
$('#third').enllax({
type: 'background', // 'foreground'
ratio: 1.5,
direction: 'vertical' // 'horizontal'
});
$('#fourth').enllax({
type: 'background', // 'foreground'
ratio: 2.0,
direction: 'vertical' // 'horizontal'
});
})(jQuery);
</script>
</head>
<body>
<div id="a">
<div id="first" class="dem1" data-enllax-ratio=".5" data-enllax-direction="horizontal" style="z-index:99">
This is my first div to display image.
<img src="images/r1.jpg" data-enllax-ratio=".5" data-enllax-type="foreground"/>
</div>
<div id="second" class="dem1" data-enllax-ratio="1.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
This is my second div to display image.
<img src="images/r2.jpg" data-enllax-ratio="1.0" data-enllax-type="foreground"/>
</div>
<div id="third" class="dem1" data-enllax-ratio="1.5" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
This is my third div to display image.
<img src="images/rc.jpg" data-enllax-ratio="1.5" data-enllax-type="foreground"/>
</div>
<div id="fourth" class="dem1" data-enllax-ratio="2.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
<img src="images/rr.jpg" data-enllax-ratio="2.0" data-enllax-type="foreground"/>
This is my fourth div to display image.
</div>
</div>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
color: #444;
line-height: 1.4;
overflow-x: hidden;
/* background: url(http://subtlepatterns.com/patterns/geometry2.png);*/
}
.text-center {
text-align: center;
}
}
.dem1 {
height: 400px;
background-size: cover;
box-sizing: border-box;
padding: 100px;
}
}.box {
width: 90%;
margin: 0 auto;
background: #efefef;
padding: 100px;
box-sizing: border-box;
border: 1px solid #ddd;
box-shadow: 0 0 1px #777;
margin-bottom: 15px;
}.b2 {
background: #dedede;
}.dl {
margin-top: 200px;
padding: 100px;
}
.fork-mmk {
position: fixed;
top: 0px;
right: 0px;
z-index: 99999;
}
If you use the simple activation, you don't need anything else.
So, I'd recommend you only use:
<script type="text/javascript">
(function($){
$(window).enllax();
});
</script>
And via data-attribute you config your enllax element. You can see his Github project https://github.com/mmkjony/enllax.js
I know dragging works because i can do it on jsfiddle examples, but i'm clearly not doing something right. I have added the html, css and js below but still cant drag the div in chrome. All help appreciated.
html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel='stylesheet' href='drag.css'></link>
<script src='drag.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="car">
<div id="top"></div>
<div id="bottom"></div>
<div id="fwheel"></div>
<div id="bwheel"></div>
</div>
</body>
</html>
drag.css
#top {
position: relative;
height: 50px;
width: 50px;
border-radius: 5px;
background-color: #cc0000;
left: 25px;
}
#bottom {
position: relative;
height:25px;
width: 100px;
background-color: #cc0000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
top: -25px;
}
#fwheel {
position: relative;
height:20px;
width:20px;
border-radius: 100%;
background-color: black;
top: -35px;
left: 5px;
}
#bwheel {
position: relative;
height:20px;
width:20px;
border-radius: 100%;
background-color: black;
top: -55px;
left: 75px;
}
drag.js
$(document).ready(function() {
$('#car').draggable();
});
I have a Flowplayer flash issue. I'm using multiple video overlays and the player works perfectly on multiple desktop browsers but not on ios devices. I've tried the iPad js include and .ipad(). but nothing works. Can anyone point out the flaw here or a work around to get this to play on ios devices? Here's the full code... Thanks!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://www.angelmedflight.com/flowplayer/example/flowplayer-3.2.6.min.js"></script>
<script src="http://www.angelmedflight.com/flowplayer/flowplayer.ipad-3.2.2.min.js"></script>
<style>
#overlay {
display: none;
padding: 0px;
width: 720px;
height: 466px;
background-image: url('http://www.angelmedflight.com/assets/images/BlackBox.png');
}
.close {
background: url('http://www.angelmedflight.com/assets/images/close.png') no-repeat;
position: absolute;
top: 2px;
right: 5px;
display: block;
width: 35px;
height: 35px;
cursor: pointer;
}
.close:hover {
background: url('http://www.angelmedflight.com/assets/images/closeHover.png') no-repeat;
}
#player {
display: block;
width: 640px;
height: 360px;
margin-top: 40px;
margin-left: 40px;
border-top: 1px solid #000;
border-left: 1px solid #111;
border-right: 1px solid #444;
border-bottom: 1px solid #666;
border: 1px solid #000;
}
#player *:focus {
outline-style: none;
}
</style>
<script>
$(function () {
var player = $f("player", "http://angelmedflight.com/flowplayer/flowplayer-3.2.15.swf").ipad();
$("a[rel]").overlay({
mask: {
color: '#000',
opacity: 0.8
},
onLoad: function () {
player.play(this.getTrigger().attr("href"));
},
onClose: function () {
player.unload();
}
});
});
</script>
</head>
<body>
<div class="ls-layer">
<img class="ls-bg" src="assets/images/carousel/video1.jpg" />
<a rel="#overlay" href="http://www.angelmedflight.com/video/Process_640x360_vegas_i.mp4"><img class="ls-s1" src="http://www.angelmedflight.com/assets/images/carousel/layer_play_button.png" /></a>
</div>
<div id="overlay">
<a class="close"></a>
<div id="player"> </div>
</div>
</body>
</html>
When you say "it doesn't work" what exactly is the experience?
Does it not load the video at all or just not load it in an overlay?
I believe the plugin opens the player in fullscreen mode and customizes the appearance of this mode.
When a player is loaded in full screen mode on iOS it is rendered in the system player, so the JS you are trying to use would have no effect.
If it is not playing at all, I cannot help you. Perhaps you could provide more information.
is it possible to add my blogposts to JCarousel instead of a html code? It should look like this:
=> EXAMPLE
On this site the content is just html, but I want my blogpost to show off.
Let's say I wrote 5 blogposts, so the Slider must show me the 5 blogposts.
Hope someone can help me out!
Greetings
Nico
You'll need to create a macro (xslt or razor) that will display your blog post nodes and then target them with jquery to load the jcarousel. Below is an example of a razor script that does this using the code from the example you referenced:
#using umbraco.MacroEngines
#inherits DynamicNodeContext
#try
{
<script type="text/javascript" src="http://www.fdp-bw.de/jcarousel/lib/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="http://www.fdp-bw.de/jcarousel/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.fdp-bw.de/jcarousel/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="http://www.fdp-bw.de/jcarousel/skins/tango/skin.css" />
<style type="text/css">
/**
* Additional styles for the controls.
*/
.jcarousel-control {
margin-bottom: 10px;
text-align: center;
}
.jcarousel-control a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold;
}
.jcarousel-control a:focus,
.jcarousel-control a:active {
outline: none;
}
.jcarousel-scroll {
margin-top: 10px;
text-align: center;
}
.jcarousel-scroll form {
margin: 0;
padding: 0;
}
.jcarousel-scroll select {
font-size: 75%;
}
#mycarousel-next,
#mycarousel-prev {
cursor: pointer;
margin-bottom: -10px;
text-decoration: underline;
font-size: 11px;
}
</style>
<script type="text/javascript">
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function () {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function () {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
jQuery('#mycarousel-next').bind('click', function () {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function () {
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function () {
jQuery("#mycarousel").jcarousel({
scroll: 1,
visible: 1,
auto: 10,
wrap: "last",
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
<div id="mycarousel" class="jcarousel-skin-tango">
<ul>
#foreach (var post in Model.AncestorOrSelf().Descendants("umbBlogPost"))
{
<li>
<h2>#post.Name</h2>
<div>#post.bodyText</div>
</li>
}
</ul>
<div class="jcarousel-control">
#for (int i = 0; i < Model.AncestorOrSelf().Descendants("umbBlogPost").Count(); i++)
{
#(i + 1)
}
</div>
</div>
}
catch (Exception e)
{
<!-- #e.ToString() -->
}
That will give you all of the posts. You may want to do some ordering and filtering and then get the top five or whatever:
var posts = Model.AncestorOrSelf().Descendants("umbBlogPost").OrderBy("PostDate desc").Take(5);