I would like to qtip some links but not all,
each link is different
here is a example of the NON Working code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>qTip2 - My test case - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
<script type='text/javascript' src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css"/>
<style type='text/css'>
body{
padding: 50px;
}
.qtip-wiki{
max-width: 385px;
}
.qtip-wiki p{
margin: 0 0 6px;
}
.qtip-wiki h1{
font-size: 20px;
line-height: 1.1;
margin: 0 0 5px;
}
.qtip-wiki img{
float: left;
margin: 10px 10px 10px 0;
}
.qtip-wiki .info{
overflow: hidden;
}
.qtip-wiki p.note{
font-weight: 700;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: 'http://qtip2.com/demos/data/snowyowl',
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
});//]]>
</script>
</head>
<body>
<a href='non_QTip_Link.php' target='_blank'>Snowy Owl 0</a>
<br><br>
<a href='qtip_link_Yes1.php' onclick=$qTIPThisLink>Snowy Owl 1</a>
<a href='non_QTip_Link.php'>Snowy Owl 00</a>
<br><br>
<a href='qtip_link_Yes2.php' onclick=$qTIPThisLink>Snowy Owl 2</a>
</body>
</html>
I would like to replace: url: 'http://qtip2.com/demos/data/snowyowl',
with the URL that was clicked and place it here and if the onclick was not fired then Qtip would not trigger as well.
I found a example at http://jsfiddle.net/craga89/L6yq3/ but it loads only one link using the same URL and it looks as if it will qTip all of the 'A' href's on the page I don't want it to do that and it also fires on mouseover I want it onclick only because I don't want to load the page until the user clicks the link.
You can give the a tags that you want to have qtip a class like:
<a href='....' class='qtip-link'> LINK </a>
Then you can add the following javascript:
<script type='text/javascript'>
$(document).ready(function() {
$('.qtip-link').each(function() {
$(this).click(function() {
return false; //disables the the link from redirecting
});
var linkUrl = $(this).attr("href"); //gets the url from the link
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: linkUrl,
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki',
show: 'click' //this will let the qtip only show when the link is clicked
});
});
});
});
</script>
Hope this is what you wanted :)
Related
I'm try to rotate an element but when choosing another element it's all rotate at the same time.
So I need to know how to rotate an element and it would be nice if you guys have a similar system. Because I want to learn more about this kind of system. Which is very necessary and important to me to study and work.
$(document).ready(function() {
var container = document.querySelector(".container");
var rotate = document.createElement("div");
rotate.className = "rotate";
//create Element
$("#add").click(function() {
container.appendChild(addElement());
addEvent();
});
const addElement = () => {
var element = document.createElement("div");
element.className = "resizable";
return element;
}
//add event
function addEvent() {
$(".resizable").click(function(e) {
if (e.currentTarget === this) {
$(this).append(rotate);
$(this).resizable({
handles: 'ne, se, sw, nw'
});
$(this).draggable().rotatable({
handle: $('.rotate')
});
}
});
}
});
.resizable {
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
user-select: none;
z-index: 0;
}
.rotate {
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
top: -30px;
left: calc(50% - 5px);
cursor: move;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<button class="add" id="add">add</button> //for add element
<button class="save" id="save">save</button> //for save size and position
<div class="container"></div>
</body>
</html>
Thanks everyone in advance for helping me.
I have a kendo modal window, In which i have a form, so before closing I want to alert the user that there might be changes for that you have not saved. the problem is, kendo modal window seems to have only close event, so if I preventDefault on close event then it is difficult to close, and If I try to add custom 'X' button then it doesn't seem to be seating on the top right corner. any help/direction is appreciated. thanks
Try this:
function onClose(e) {
if (e.userTriggered) {
e.preventDefault();
if (window.confirm('Are you sure?')) {
dialog.data("kendoDialog").close();
}
}
}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://demos.telerik.com/kendo-ui/dialog/events">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
<span id="show" style="display:none" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md hidden-on-narrow">Click here to open the dialog.</span>
<div id="dialog"></div>
<div class="responsive-message"></div>
<script>
var dialog = $("#dialog");
var show = $("#show");
dialog.kendoDialog({
width: "400px",
title: "Software Update",
closable: true,
modal: false,
content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
actions: [
{ text: 'Close', action: onClose },
{ text: 'OK', primary: true }
],
close: onClose
});
function onClose(e) {
if (e.userTriggered) {
e.preventDefault();
if (window.confirm('Are you sure?')) {
dialog.data("kendoDialog").close();
}
}
show.fadeIn();
}
show.click(function () {
dialog.data("kendoDialog").open();
show.fadeOut();
});
</script>
<style>
#example {
min-height: 370px;
}
#example .box {
margin: 0;
}
#show {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
margin-top: 30px;
}
</style>
</div>
<div class="kd-example-console">
<div class="header">
<span class="title">CONSOLE LOG</span>
<span class="clear kd-text-secondary">Clear log</span>
</div>
<div class="console"></div>
</div>
</body>
</html>
Dojo
i am trying to swap the path of lottie / bodymovin on button click,
it works if i dont populate the animPath parameter first, so it seems like the click function cannot overwrite the parameter if there is already a path.
its like it loads in the data at the start and then thats it, i noticed the same thing with updating the speed, i had to call the setSpeed parameter after changing the speed to get it to update.
ive hunted the internet and can;t seem to find a parameter to setPath or something similar
does anyone know of a way to swap the path on click?
here is my code
var anim
var animationSpeed = 2;
var button = document.getElementById("button");
function runAnimation(animPath) {
console.log("lottie is loaded");
var animData = {
container: document.getElementById("test"),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: animPath
};
anim = bodymovin.loadAnimation(animData);
anim.setSpeed(animationSpeed);
}
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_lef8tmad.json");
$( "button" ).click(function() {
animationSpeed = 1;
anim.setSpeed(animationSpeed);
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_vuxs5lpt.json");
console.log("path 2 loaded");
});
body {
background-color: #FDC800;
overflow: hidden;
text-align: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#animationWindow {
width: 100%;
height: 100%;
}
#button{
width: 100px;
height:40px;
z-index: 10;
position: absolute;
top:200px;
left:200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lottie swap</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie.min.js" integrity="sha512-ilxj730331yM7NbrJAICVJcRmPFErDqQhXJcn+PLbkXdE031JJbcK87Wt4VbAK+YY6/67L+N8p7KdzGoaRjsTg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head><script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-player/1.5.7/lottie-player.js" integrity="sha512-wUgyNk7aI5qo1G294znyaFsJi8JbXTyTn7QEViCh+f021/yo6aKHPw3GX19txyhfiLQIB/duQcSKADt1GqE+KA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<div id="test">
</div>
<button id="button" >Click me</button>
</body>
</html>
<!-- Link to the script-->
<script type="module" src="js/script.js"></script>
I've a panel with a copy link inside, when I click to open my panel a display:none is added automatically
to solve that i added this line on my jquery part: showme.style.display = "none"; now we can open the panel perfectly but it's impossible to close it after
someone have a solution ?
here is my link WITHOUT showme.style.display = "none";:
here is my link and here is my code WITH showme.style.display = "none";:
<!DOCTYPE HTML><!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head><meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
div#panel1 {
display: block;
background-color:#eee;
visibility: hidden;
}
.flip1 {
display: block;
background-color:#eee;
}
#check {
visibility: hidden;
width:12px; height:12px;
}
span#copy-callbacks, span#copy-callbacks2 {
float: none; cursor:pointer;
}
.zclip {
border:1px solid red;
position:relative;
display:inherit;
}
div#zclip-ZeroClipboardMovie_1.zclip {
position: relative;
margin-top:-18px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("span#copy-callbacks").zclip({
path:"ZeroClipboard.swf",
copy:$('#callback-paragraph').text(),
beforeCopy:function(){
$('#copy-callbacks').css('display','none');
},
afterCopy:function(){
$('#copy-callbacks').css('display','block');
}
});
document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks').hover(
function () {
$(this).css({"color":"#e0ccb4"});
},
function () {
$(this).css({"color":"#000"});
}
);
$(".flip1").click(function(){
$("#panel1").slideToggle("fast");
});
});
function newwindow() {
var showme = document.getElementById("panel1");
showme.style.visibility = "visible";
showme.style.display = "none";
}
</script>
</head>
<body>
<div style="margin-top:150px;" onclick="newwindow()" class="flip1">Click to slide the first panel down or up</div>
<div style="display: block; padding-bottom:80px;" id="panel1">
<span id="copy-callbacks"> Copy link <img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>
</div>
<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>
You don't need newwindow()
For #panel1 : in document-level style, remove visibility and display.
For #panel1 : in inline style, make display : none
I am talking about the first link.
I have some code to get the size of the body on screen during a window resize event and use this elsewhere, however for some reason the size that is determined is always the size before the resizing:
$(document).on('ready', function () {
initResize();
});
function initResize() {
$(window).on('resize', doResize).trigger('resize');
};
function doResize() {
var wh = $('.game').height();
var ww = $('.game').width();
console.log("game " + ww +"x" +wh);
}
and the console output always returns the same data, yet if I change the selector to $(window) it changes as the window resizes. Can someone help please?
the html is very simple:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/myStyle.css" /
<script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/init.js"></script>
</head>
<body>
<section class="game">
</section>
</body>
</html>
and the css:
#charset "utf-8";
* {
padding: 0;
margin: 0;
border: none;
outline: none;
}
html {
font-size: 62.5%;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}