I tried to create image rotate but it's not working. I tried different codes from different sites but don't know what's wrong.
This is my code.
var value = 0
$("#image").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});
#image{
margin:200px 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.sobekrepository.org/includes/jquery-rotate/2.2/jquery-rotate.min.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<img src="http://jqueryrotate.com/images/chrome_32x32.png" id="image" onclick="" />
In your example, jQuery is not defined, check this code:
var value = 0
$("#image").rotate({
bind: {
click: function() {
value += 90;
$(this).rotate({
animateTo: value
})
}
}
});
#image {
margin: 200px 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="include/jQueryRotate.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<img src="http://i.forbesimg.com/media/lists/companies/apple_416x416.jpg" id="image" onclick="" />
Related
Works
$("a").on("click", function(e) {
alert(1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
Does not work
$("a").on("click", function(e) {
alert(1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<iframe id="myIframe" src="" style="width: 200px; height: 200px;" />
Because your markup is invalid. iframe is not a void element. You should close the iframe properly.
The first rendered HTML in my Chrome browser:
<html><head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<script type="text/javascript">
$("a").on("click", function(e) {
alert(1);
});
</script>
</body></html>
The second one:
<html><head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Link
</div>
<iframe id="myIframe" src="" style="width: 200px; height: 200px;">
<script type="text/javascript">
$("a").on("click", function(e) {
alert(1);
});
</script>
</body>
</html></iframe></body></html>
I got this code:
<!DOCTYPE html>
<head>
<title>bla</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
</script>
<div id="left">
<img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
<img id="preview" />
</div>
</body>
And CSS:
#preview
{
background:#333;
border: solid 1px #000;
display: none;
color: #fff;
width: 200px;
}
All that from: http://jsfiddle.net/chrissp26/sd3ouo9g/ But it's not working by me like there, what could be the issue?
try putting it inside a $(document).ready like this :
$(document).ready(function() {
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
You are referencing DOM elements before the page is fully loaded. The only reason that code works in the JSFiddle you referenced is that they selected the onLoad option:
As Yourness suggests, use a DOM ready handler (which the JSFiddle onLoad does for you).
The shortcut versions of $(document).ready(function(){...}); are:
$(function(){...});
<script language="javascript" type="text/javascript">
$(function(){
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
</script>
Or the more robust version (which scopes a local $ at the same time):
jQuery(function($){...});
<script language="javascript" type="text/javascript">
jQuery(function($){
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
</script>
Option 3:
Or you can simply put your existing <script> block at the bottom of the body element (after the elements it references).
<body>
<div id="left">
<img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
<img id="preview" />
</div>
<script language="javascript" type="text/javascript">
$("#left").children(".thumb").on({
mouseenter: function() {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function() {
$("#preview").hide();
}
});
</script>
</body>
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title>Hello Flot</title>
<link class="include" rel="stylesheet" type="text/css" href="/static/jqplot/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/static/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/static/flot/jquery.flot.selection.js"></script>
<script type="text/javascript" src="/static/jqplot/plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/jqplot/jquery.jqplot.js"></script>
<body>
<div id="output_plot_container" style="float:left; width: 800px; height: 600px"></div>
<button onclick="updateChart()">Try it</button>
<script >
var plot1 = $.jqplot ('output_plot_container', [[1,2,3,4]], {
title : 'Demodulated signal',
cursor:{zoom:true}
});
var url = "/sensor/demodulated_debug_data";
var updateChart = function() {
$.getJSON(url, function(newdata) {
console.log(newdata);
for (var f_id in newdata)
if (newdata.hasOwnProperty(f_id)) {
if (f_id == 'demodulated') {
plot1.series[0].data = newdata[f_id];
plot1.replot({ resetAxes: true } );
}
}
})
};
timer = setInterval(function(){updateChart()}, 1000);
console.log('still running');
</script>
</body>
</html>
I'm reading documentation and I just can't figure out why it doesn't show the cursor to me.
Try this, it works for me
$(document).ready(function () {
$('#output_plot_container').on('jqplotDataHighlight', function () {
$('.jqplot-event-canvas').css('cursor', 'pointer');
});
$('#output_plot_container').on('jqplotDataUnhighlight', function () {
$('.jqplot-event-canvas').css('cursor', 'auto');
});
});
or
.pointerlink
{
cursor: pointer;
}
<div id="output_plot_container" class="pointerLink" ...>
Turned out that I should include jqplot before the cursor in this html.
I am using this javascript from this link.
I have created a new div element in javascript using the following code
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
value= VALUE_FROM_DB.split("||");
for (k=0;k<value.length;k++)
{
if (value[0] == paramName1)
{
return unescape(value[k]);
console.log("no of swipe views ");
}
var val = k+1;
var superdiv = document.getElementById('swiper-wrapper');
var newdiv = document.createElement('div');
var divIdName = 'swiper-slide'+val;
console.log("div name: "+divIdName);
newdiv.setAttribute('id',divIdName);
newdiv.setAttribute('class','swiper-slide');
newdiv.style.width = "25%";
newdiv.style.height = "30%";
superdiv.appendChild(newdiv);
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
console.log("clinical values: "+value[k]);
console.log("processsing parameter loop ");
var searchString = window.location.search.substring(1),i,val,params = searchString.split("&");
}
html code
<div id="swipe_body">
<div class="swiper-container swiper-threshold">
<div class="swiper-wrapper" id="swiper-wrapper">
</div>
</div>
</div>
css code:
.clinical
{
font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
width:auto; height:30%; display:block; overflow:hidden;float:left;
}
the output comes like this
but i would like to get it like this
on swiping i should get it like this
Please suggest me ways to solve this problem..
EDIT: I have given the following code after the style and before javascript.
</style>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css" />
<link rel="stylesheet" type="text/css" href="css/swiper-demos.css" />
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
<script type="text/javascript" charset="utf-8">
EDIT 2:
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
document.querySelector('.swiper-container');
i added this document.querySelector('.swiper-container'); as well as
function onDeviceReady()
{ var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',loop: true
});
The only improvement is that only the 1st slide is there, it's not swiping.
There is no Jquery in your code but only native javascript.
I recommend you to give a look at this plugin.http://plugins.jquery.com/jcarousel/
This is a jquery Carousel. I already used it and it's simple, well documented and flexible.
Click "view homepage" on the top right corner and check demos in the developper's page.
EDIT here a sample code using JCarousel to help you :
<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
<html>
<body>
<div id="swipe_body">
<div class="swiper-container swiper-threshold" id="mycarousel">
<div class="swiper-wrapper" id="swiper-wrapper">
<div id="container1" class="container"><span><img...</span></div>';
<div id="container2" class="container"><span><img...</span></div>';
<div id="container3" class="container"><span><img...</span></div>';
... ...
</div>
</div>
</div>
</body>
</html>
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// optional configuration goes here
});
});
</script>
As you can see, only 2 line of jquery to get this.
You can download jquery.jcarousel.min.js at the url given above. Just create your several conteners with the data from the server. Remember, avoid giving same id to differents elements
for (k=0;k<value.length;k++){
...
var cnt1 = '<div id="container" cla
...
They will all have the same id.
I've just downloaded the nailthumb project from http://www.garralab.com/nailthumb.php but I cant call this function from asp.net mvc 3 of js.
the functions in the examples are called as follow:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({
width:100,height:100,method:'resize',fitDirection:'top left'});
});
</script>
I've tried:
<script type="text/javascript">
$(document).ready(function () {
$('#nailthumb-container').nailthumb({
width: '100',
height: '100'
});
});
</script>
The js file loads but I cant figure out how to call this functions.
Any Ideas?
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.css" type="text/css"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<style type="text/css" media="screen">
.square-thumb {
width: 150px;
height: 150px;
}
</style>
<div class="nailthumb-container square-thumb">
<img alt='' src='#Url.Action("Show", "ConsultorioImagenes", new { id = Model.ID})' />
</div>
You're using the id selector (#) when you're assigning it a class.
This line:
<div class="nailthumb-container square-thumb">
..assigns the nail-thumb-container class. You need to use the class selector (.) in your jQuery call:
<script type="text/javascript">
$(document).ready(function () {
$('.nailthumb-container').nailthumb({
width: '100',
height: '100'
});
});
</script>
You have <div class="nailthumb-container square-thumb">
and $('#nailthumb-container').nailthumb({
It should be $('.nailthumb-container').nailthumb({