I need to rotate and move an image at the same time, actually works just one time, but then just move and not rotating.
This is what i have:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain(){
$(".cartman").hover(MoveCartman,Normal); //on hover Eric Cartman
var v1=100; //variable to move Cartman
function MoveCartman(){
$(this).attr("src","CartmanNude.png");
$(this).css({
"margin-top":v1+"px",
"transform":"rotateZ(-360deg)",
"transition":"1s"
});
if (v1<200){v1+=100;}
else {v1=0;}
}
function Normal(){
$(this).attr("src","CartmanNormal.png");
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="CartmanNormal.png">
</div>
</div>
</div>
</body>
</html>
I think this should work fine but I dont know why the function on hover is not working more than just 1 time.
Sorry for my bad english and thanks.
Try substituting lowercase d for D at doctype declaration , adding all to transition value before duration ; css "margin-top": "0px" , "transform": "rotateZ(0deg)" to Normal function
.cartman {
transition: all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain() {
$(".cartman").hover(MoveCartman, Normal); //on hover Eric Cartman
var v1 = 100; //variable to move Cartman
function MoveCartman() {
$(this).attr("src", "http://lorempixel.com/100/100/cats");
$(this).css({
"margin-top": v1 + "px",
"transform": "rotateZ(-360deg)"
});
if (v1 < 200) {
v1 += 100;
} else {
v1 = 0;
}
}
function Normal() {
$(this).attr("src", "http://lorempixel.com/100/100/technics")
.css({
"margin-top": "0px",
"transform": "rotateZ(0deg)"
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="http://lorempixel.com/100/100/technics">
</div>
</div>
</div>
</body>
</html>
Related
So I had the idea to try to make an image slider where instead of fading in and out the sliders just move into place one by one, this is by adding 450px (width of each image slider).
However I'm struggling on how to accomplish this,I want to check wether the slider is the last so that the the slider reverts back to the first and starts again.
This is the code I came up with so far:
$(document).ready(function(){
var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
setInterval(function() {
if(show_index == (sliders.length- 1))
{
$('.sliders_container').animate({ 'left': '0px'}, 2000);
}
else
{
$('.sliders_container').animate({ 'left': '+=450px'}, 1000);
}
}, interval);
});
/*SECTION SLIDER MARG START*/
.section_slider_marg_maincontainer{width:100%; height:275px; outline:2px solid white; position:relative; overflow:hidden;}
.section_slider_marg_items_container{width:auto; height:100%; position:absolute; top:0px; left:0px; display:flex; }
.section_slider_marg_item{height:100%; width:450px; outline:2px solid white; background-size:cover; }
/*SECTION SLIDER MARG END*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_slider_marg_maincontainer" style="">
<div class="section_slider_marg_items_container sliders_container" style="">
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
</div>
</section>
I would recommend using the Slick JQuery library for this. You can view it here:
http://kenwheeler.github.io/slick/
I edited the index.html file that they provided and here is what I ended up with (this will only work if you have the Slick library downloaded):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<style type="text/css">
</style>
</head>
<body>
<section class="carousel">
<img src="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=5">
<img src="http://placehold.it/350x300?text=6">
<img src="http://placehold.it/350x300?text=7">
<img src="http://placehold.it/350x300?text=8">
<img src="http://placehold.it/350x300?text=9">
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".carousel").slick({
dots: true
});
});
</script>
</body>
</html>
As Toms was saying, each time you animate, you should increment a variable to keep track.
This probably is not the most elegant solution, but it uses your same code setup.
$(document).ready(function(){
var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
var scrolledPx = 0;
setInterval(function() {
if(scrolledPx >= 450 * sliders.length - 1) {
$('.sliders_container').animate({ 'left': '0px'}, 2000);
scrolledPx = 0;
}
else{
$('.sliders_container').animate({ 'left': '+=450px'}, 1000);
scrolledPx += 450;
}
}, interval);
});
Im making a simple hud that supposed to show itself when your mouse is on the main panel.
For some reason the onmouseover and out not working. When I click inspect element in the browser on the panel it shows me the html tag. I know that the listeners were created, again from looking at the inspect element in the browser.
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
<img src="icons/white/open.png" style="float:right" class="btnMedia" />
</div>
<div id="bottom">
<center>
<img src="icons/white/pre.png" class="leftandright btnMedia" />
<img src="icons/white/play.png" class="leftandright btnMedia" />
<img src="icons/white/next.png" class="leftandright btnMedia" />
</center>
</div>
</div>
</body>
<script>
var panel = document.getElementById("mainpanel");
var top = document.getElementById("top");
var bottom = document.getElementById("bottom");
//alert("script")
panel.onmouseover = function() {
alert("in")
top.display = "block";
bottom.display = "block";
}
panel.onmouseout = function() {
alert("out")
top.display = "none";
bottom.display = "none";
}
</script>
</html>
There are two things wrong in your code.
Missing style when manipulating with CSS values
And top is a reserved keyword in JavaScript and it's tricky to use it as an variable
This works:
var panel = document.getElementById("mainpanel");
var top2 = document.getElementById("top");
var bottom = document.getElementById("bottom");
panel.onmouseover = function() {
top2.style.display = "block";
bottom.style.display = "block";
}
panel.onmouseout = function() {
top2.style.display = "none";
bottom.style.display = "none";
}
#mainpanel {
background: #faa;
height: 100vh;
}
#top, #bottom {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
I am top!
</div>
<div id="bottom">
I am bottom!
</div>
</div>
</body>
</html>
I want to bind the content of a span element (that is the current position of the element).
Problem: when I change the element position, angular doesn't update the value of the ng-bind attribute.
This is my html:
!doctype html>
<html lang="en" ng-app="exempleApp">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery2.1.4.js"></script>
<script src="jquery-ui.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="exempleApp.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.movable { width: 150px; height: 150px; padding: 0.5em; background- color: green;}
</style>
<script>
$(function() {
$( ".movable" ).draggable(
{
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
var thisId = $(this).attr('id');
$('#' + thisId + ' .posX').text(xPos);
$('#' + thisId + ' .posY').text(yPos);
}
}
);
});
</script>
</head>
<body ng-controller="imgController as ctrl">
<div id="1" class="ui-widget-content, movable" >
<p>Drag me around</p>
<span class="posX" ng-bind="ctrl.presentation.images[0].posX"></span>
<span class="posY" ng-bind="ctrl.presentation.images[0].posY"></span>
</div>
<div id="2" class="ui-widget-content, movable" >
<p>Drag me around</p>
<span class="posX" ng-bind="ctrl.presentation.images[1].posX"></span>
<span class="posY" ng-bind="ctrl.presentation.images[1].posY"></span>
</div>
<div >
<span ng-bind="ctrl.presentation.images[0].posX"></span>
<span ng-bind="ctrl.presentation.images[0].posY"></span>
</div>
</body>
</html>
And this is my exempleApp.js:
(function() {
var app = angular.module("exempleApp", []);
app.controller('imgController', function(){
this.presentation = pres;
});
var pres = {
images: [
{
posX: "0",
posY: "0"
},
{
posX: "0",
posY: "0"
}
]
};
})();
Thanks for the help
https://docs.angularjs.org/api/ng/directive/ngBind
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
Try this:
<span class="posX">{{ctrl.presentation.images[1].posX}}</span>
Full explanations Databinding in AngularJS
I may have misunderstood your question. It's my understanding that ng- bind binds the value of the html to the value of the object. That is, it's going to read the value from the object, not set it. So when the object changes, the html gets updated. Not the other way around.
#Veo
<p>drag.html</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dragger</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/drag.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.movable { width: 150px; height: 150px; padding: 0.5em; background- color: green;}
</style>
<body ng-app="exempleApp">
<div ng-controller="imgController">
<div id="1" class="ui-widget-content movable" drag>
<p>Drag me around</p>
<span class="posX">{{presentation.images[0].posX}}</span>
<span class="posY">{{presentation.images[0].posY}}</span>
</div>
<div id="2" class="ui-widget-content movable" drag>
<p>Drag me around</p>
<span class="posX">{{presentation.images[1].posX}}</span>
<span class="posY">{{presentation.images[1].posY}}</span>
</div>
<div>
<span>#1 .movable = </span>
<span ng-bind="presentation.images[0].posX"></span>
<span ng-bind="presentation.images[0].posY"></span>
</div>
<div>
<span>#2 .movable = </span>
<span ng-bind="presentation.images[1].posX"></span>
<span ng-bind="presentation.images[1].posY"></span>
</div>
</div>
<script>
$(function() {
$( ".movable" ).draggable();
});
</script>
</body>
</html>
<p>drag.js</p>
var app = angular.module("exempleApp", []);
app.controller('imgController', function($scope){
$scope.presentation = pres;
});
app.directive('drag', function(){
return {
link: function(scope, element, attrs){
//initial position
scope.presentation.images[attrs.id-1].posX = element.position().left;
scope.presentation.images[attrs.id-1].posY = element.position().top;
//position after drag
element.on('drag', function(){
scope.presentation.images[attrs.id-1].posX = element.position().left;
scope.presentation.images[attrs.id-1].posY = element.position().top;
console.log(scope.presentation.images[attrs.id-1]);
scope.$apply();
})
}
}
})
var pres = {
images: [
{
posX: "0",
posY: "0"
},
{
posX: "0",
posY: "0"
}
]
};
<p>Note changes: - 1)created a drag directive.then apply it to div.movable.
2)initial position will give you position of draggable div on page load.
3)scope.$apply(); plays important role here without this values will not be apply changes. for more information about $apply visit $apply
<p>if you have any problems just ask me</p>
I have simple list number slider with fade effect. I need to add bullet navigation to control the slider. Pls help me to do so.
jsFiddle Demo
Here is my code :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Slider</title>
<style id="jsbin-css">
.testimonials .quote {
display: none;
}
</style>
</head>
<body>
<div class="testimonials">
<div class="quote">1</div>
<div class="quote">2</div>
<div class="quote">3</div>
<div class="quote">4</div>
<div class="quote">5</div>
<div class="quote">6</div>
<div class="quote">7</div>
<div class="quote">8</div>
<div class="quote">9</div>
<div class="quote">10</div>
</div>
<script>
$(function () {
(function anim(num, delay) {
$('.testimonials .quote')
.slice(0,num)
.fadeIn()
.delay(delay)
.fadeOut()
.promise()
.done(function () {
$('.testimonials').append(this);
anim(num, delay);
});
}(2, 2000));
});
</script>
</body>
</html>
So I'm writing a little jQuery plugin but for some reason the plugin method isn't being recognised at all. Can anyone spot where I've gone wrong below
jquery.dimlights.js
(function($) {
var settings = {
opacity : 0.75,
center : false,
}
var screen_width = $(document).width();
var screen_height = $(document).height();
$.fn.dimTheLights = function(options) {
// merge options into settings
options ? $.extend(settings, options) : false;
// add overlay to DOM
$('body').append('<div id="dtl_overlay"></div>');
// resize overlay
$('#dtl_overlay').width(screen_width);
$('#dtl_overlay').height(screen_height);
};
})(jQuery);
index.html
<html>
<head>
<title>Dim The Lights Demo</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../jquery.dimlights.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="../jquery.dimlights.js"></script>
<script>
$(document).ready(function() {
$('#content img').click(function() {
$(this).dimTheLights();
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>Dim The Lights</header>
<section id="content">
<img src="http://placekitten.com/278/100" class="dimthelights" />
</section>
<footer>
<p>© 2011 • Jordan Adams</p>
#JordanCallumA
</footer>
</div>
</body>
</html>
(Then I will put it as an answer ;))
Try window instead of document.