I know this should be simple, but for the life of me I cannot figure
it out. I just need a mouseover event where it switches between 2
images until the fifth time you mouseover it changes to a third image.
here is what I have so far.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tamra Schnyder Midterm Q2</title>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function showHover(img) {
if (img) {
img.src="images/img1.jpg";
}
}
function showNormal(img) {
if (img) {
img.src="images/img2.jpg"
}
}
$(document).ready(function() {
$("#img1").mouseover(function(){
showHover(this);
}).mouseout(function(){
showNormal(this);
});
});
</script>
</head>
<br>
<h1>picture hover</h1><br/>
<img id="img1" src="images/img1.jpg" />
</body>
You can increment a simple counter everytime the mouse is over the image, and change it to the third image instead of the second once count>=5:
function showHover(img) {
if (img) {
img.src="images/img1.jpg";
}
}
function showNormal(img, change) {
if (img) {
img.src=(change)?"images/img3.jpg":"images/img2.jpg";
}
}
$(document).ready(function() {
let count = 0;
$("#img1").mouseover(function(){
showHover(this);
count++;
}).mouseout(function(){
showNormal(this, count>=5);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img1" src="images/img1.jpg" />
Related
There is a "scanning" graphic here that hides when you find the marker.
https://webxr.io/webar-playground/app/
How is that done? I have tried a bunch of different things with no luck. Maybe I am just not putting it in the correct place? Or need to call the action? Here is the last thing I tried:
'''
var m = document.querySelector("a-marker")
AFRAME.registerComponent('hide-on-scan', {
init: function () {
m.addEventListener("markerFound", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: none;");
})
m.addEventListener("markerLost", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: block;");
})
});
'''
I figured it out for those looking to do the same thing here's my HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style type="text/css">
#HeadText {
position: absolute;
top:0px;
left:50%;
z-index: 10000;
}
</style>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js">
</script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs='sourceType: webcam;'>
<div id="HeadText" style="visibility:visible;">
<h1>test</h1>
</div>
<a-marker preset='hiro'>
<a-box id="MyBox" position='0 0.5 0' material='opacity: 0.5;' color="red" ></a-box>
</a-marker>
<a-camera-static />
</a-scene>
</body>
<script src="assets/script.js"></script>
</html>
</head>
<body>
And here is the script.js:
var m = document.querySelector("a-marker")
m.addEventListener("markerFound", (e)=>{
console.log("found")
document.getElementById("HeadText").style.visibility = "hidden";
})
m.addEventListener("markerLost", (e)=>{
console.log("lost");
document.getElementById("HeadText").style.visibility = "visible";
})
I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.
Now I'm using an <img> element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.
So the html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>
And the javascript:
$('document').ready(function(){
var session = new QiSession();
session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});
I don't use any CSS at the moment.
window is an actual javascript entity and should not be quoted, which then makes it a string. Removing the quotes from 'window' will solve your problem.
See Below Snippet :
$(document).ready(function(){
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
imgMap.width($(window).width());
imgMap.height($(window).height());
}
toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="mapa" alt="mapa" src="">
</body>
<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.
In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>
Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>
This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>
That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}
I'm using parallax.js to add parallax effect on my website. I would like to remove the data-image-src property when the screen size is smaller that 767pixels.
I know I should use #media screen and (max-width: 767px) {...} on my css file for that but I just can't figure out how to set the image property to none.
Here is an example:
<html>
<head>
<title>Panagiotis Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/circle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="js/parallax.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body ng-app="">
<div ng-include src="'partials/header.html'"></div>
<div class="parallax-window" data-parallax="scroll" data-image-src="sky.jpg">
<div class="parallax-content">
<h3 id="summary">Summary</h3>
<hr>
<div ng-include="'partials/summary.html'"></div>
</div>
</div>
<!-- Some other parallax elements here -->
</body>
</html>
Inside my index.js I added as linusg suggested the following jQuery code but it doesn't seem to work.
$(document).ready(function() {
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
//$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
$(document).on('click', 'a:not([target="_blank"])', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 700);
});
});
Although the data-image-src value changes the image seems still to be there.
Any ideas?
You can use jQuery's $(window).width() for this:
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
Make sure to wrap your code into a $(document).ready(...); like below, see this documentation.
Full code:
<html>
<head>
<!-- Other metadata and resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax-window" data-parallax="scroll" data-image-src="sea.jpg">
<div class="parallax-content">
<h3 id="goals">Ambitions and Goals</h3>
<hr>
<div ng-include="'partials/goals.html'"></div>
</div>
</div>
<script>
$(document).ready(function() {
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
});
</script>
</body>
</html>
Hope this helps!
I want to show the variable state in tooltip of bootstrap, but its not getting the variable content its shows the variable name "Pump 2 {{pumpStatus2.helpText}}", and it should appear "Pump 2 On/Off" according the variable content, it works with the title when I mouse over the image.
<img class="pump" id="pump2" title="Pump 2 {{Status2.helpText}}"
ng-src="img/{{Status2.status}}" data-toggle="tooltip">
Have you considered adding ui.bootstrap as a dependency in your module? This will allow you to get bootstrap features through angular. Here is an example using a dynamic tooltip (uib-tooltip). More bootstrap examples can be found at: http://angular-ui.github.io/bootstrap/
angular.module('myApp', ['ui.bootstrap'])
.controller('MainController', function ($scope) {
var pump = {};
$scope.pump = pump;
pump.state="off";
pump.setState = function (state) {
pump.state = state;
}
});
.pump-image {
background: url('https://gauchedecombat.files.wordpress.com/2012/05/on-off.png') no-repeat;
height: 270px;
width: 262px;
}
.on {
background-position: 0 0;
}
.off {
background-position: -262px 0;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp" ng-controller="MainController as ctrl">
<input type="radio" ng-model="pump.state" value="off" />Off
<input type="radio" ng-model="pump.state" value="on" />On
<div uib-tooltip="Pump: {{pump.state}}" class="pump-image" ng-class="{on: pump.state === 'on', off: pump.state==='off'}" tooltip-placement="right"></div>
</div>
Here is a working sample: http://plnkr.co/edit/KNjxPZLFcUKS2M2fHj5G?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#2.0.0-alpha.45" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
<img ng-src="{{imgUrl}}" alt="Smiley face" title="Test String {{imgTitle}}" height="42" width="42">
</body>
</html>
JavaScript:
angular.module('app',[]);
angular.module('app').controller("MainCtrl",function($scope){
$scope.imgUrl = "http://b3.us.is.pp.ru/m/mink_blue/1/45377641oJC.jpg";
$scope.imgTitle = "Hello World!";
});
Is your app wired correctly? Please check the controller and the variables in scope. Or try to share a plunk.