Why does this button not rotate is visual studio? - javascript

If you run this code snippet you will see a button. If you click on it, it will rotate. I have the exact same code in Visual Studio (as you can see in the picture below). However, when i debug the code or press 'view in browser (Google Chrome)' it doesn't work at all.
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
body {
}
#rotate {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/css.css" />
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button id="rotate"></button>
</body>
</html>

Did you wrap your button binding inside $(document).ready(function () { });? That is not clear from your example because it works fine if it is.
Or place your javascript code beneath the button without the &(document).ready function, that also works because if it is above the button the browser will try to bind a button that does not exits yet.
<script>
$(document).ready(function () {
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
});
</script>
<style>
#rotate {
width: 100px;
height: 30px;
}
</style>
<button id="rotate" type="button">button</button>

Related

SetTimeout executing but no delay

I am developing a Binary Tree Search visualization program using JSAV library. The problem is that all the nodes are getting highlighted instantly and I want to show it step by step without any pressing of button again and again.
I tried to highlight a node and use timeout function to stop the execution for few seconds and then unhighlight the node and then proceed with next selected node, however there is no effect at all. Can anybody suggest me what can I do to modify my program to incorporate this type of feature?
Code: (Uses JSAV library)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/JSAV.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<title>Test Binary Tree Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="lib/jquery.transit.js"></script>
<script src="lib/raphael.js"></script>
<script src="lib/JSAV.js"></script>
<Script src="lib/includeall.js"></Script>
<style>
.highlight
{
background-color: blue;
}
.unhighlight
{
background-color: white;
}
#av {
width: 98%;
position: relative;
}
.jsavcounter {
position: absolute;
top: 15px;
}
.jsavtree {
position: relative;
width: 500px;
height: 300px;
}
svg {
height: 600px;
}
path {
pointer-events: visible;
}
</style>
</head>
<body>
<div id="av">
</div>
<script>
var jsav=new JSAV("av");
var bt=jsav.ds.binarytree();
addNode(bt,20);
addNode(bt,5);
addNode(bt,40);
addNode(bt,50);
addNode(bt,60);
addNode(bt,70);
addNode(bt,4);
function donothing()
{
}
function searchBinarytree()
{
var value=parseInt(document.getElementById("value").value);
var test=bt.root();
while(test!=null)
{
test.addClass("highlight");
setTimeout(donothing,20000);
if(test.value()==value)
{
break ;
}
if(test.value()<=value)
{
test.toggleClass("unhighlight");
test=test.right();
}
else
{test.toggleClass("unhighlight");
test=test.left();
}
bt.layout();
}
}
</script>
<div id="valuebox">
Value to search:<input id="value" type="text"> <button type="button" onclick="searchBinarytree()"> Search</button>
</div>
</body>
</html>
setTimeout is calling donothing which is "doing nothing". You should instead call the function you want repeated from within setTimeout. I assume you expect it to pause at that call, but that's not how setTimeout works. More info can be found at https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
Something like this should work (not tested)
var test;
function searchBinarytree() {
test = bt.root();
test.addClass("highlight");
setTimeout(updateNode, 20000);
}
function updateNode() {
var value = parseInt(document.getElementById("value").value);
if (test != null) {
if (test.value() != value) {
test.removeClass("highlight");
if (test.value() <= value) {
test = test.right();
} else {
test = test.left();
}
if (test != null) {
test.addClass("highlight");
}
setTimeout(updateNode, 20000);
}
bt.layout();
}
}
Not really sure that it's your issue but:
When you use setTimeout use it like that
setTimeout(yourFunction, timeout);
not
setTimeout(yourFunction(), timeout);
you have to pass the function to be invoked, you don't invoke the function

Is there any ways to open my web application in full screen in ASP.Net MVC without any user interaction

Is there any ways to open my web application in full screen (as like press F11) in ASP.Net MVC without any user interaction.
I am using below codes but this not working on page load time, this is working when user action in page.
But I need to open my web page in full screen when page is loaded.
Below code is working on click event but not working on page load.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:-ms-fullscreen {
background: red;
width: 100%;
}
html:fullscreen {
background: red;
}
</style>
</head>
<body style="background:white;">
<button id="btn">Fullscreen</button>
<div id="test" style="width:512px; height:100px; background-color:#000000;" >
<span>this is test</span>
</div>
<script>
$(document).ready(function () {
var canvas = document.getElementById('test');
fullScreen(canvas);
});
function fullScreen(element) {
if (element.requestFullScreen) {
console.log("1");
element.requestFullScreen();
} else if (element.webkitRequestFullScreen) {
console.log("2");
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
console.log("3");
element.mozRequestFullScreen();
}
}
</script>
</body>
</html>
Please suggest how can we done it?

mobile tap event issue

I am facing issue with tap event on mobile devices.
create 3 divs with same height. Tap on second div to hide the first div and it will trigger the event on third div.
sample code: reproducible in chrome device simulator
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phone issue</title>
</head>
<style type="text/css">
.hide {
display: none;
}
#one, #two, #three {
width: 100%;
height: 150px;
border: 1px solid #000;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#two').on('tap', function () {
$('#one').toggle();
});
$('#three').on('tap', function () {
alert('you just clicked me!');
});
});
</script>
<body>
<div id="one">hide</div>
<div id="two">main</div>
<div id="three">click</div>
</body>
</html>
try to use 'click' event instead of 'tap' event. I run in to the same issue and manage to solve it by using 'click' event. Please see jquery mobile documentation for details: https://api.jquerymobile.com/vclick/. Regards.

How do I make my jquery loading spinner automatic?

I used a JQuery waiting spinner demo from Github and modified it to my liking. I want the spinner to initiate automatically as soon as the page appears (giving time for the larger images on the page to load), however at the moment one has to click 'start waiting' for the spinner to appear.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="waiting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
.content {
margin-bottom: 50px;
max-width: 500px;
}
button.waiting-done {
display: none;
}
</style>
<!--script src="../libs/jquery/jquery.js"></script-->
<script src="jquery-2.0.2.min.js"></script>
<script src=" jquery.waiting.min.js"></script>
<script type="text/javascript">
$(function () {
var content = $('.content').first().html();
$('button').on('click', function () {
$(this).toggle().siblings('button').toggle();
if ($(this).hasClass('waiting-done')) {
$(this).siblings('.content').waiting('done')
.html(content.substring(0,Math.random() * content.length) + '...');
}
});
});
</script>
</head>
<body>
<div id="demo-fixed">
><button type="button" class="waiting">► start waiting</button>
><button type="button" class="waiting-done">■ waiting done</button>
<div class="content">
</div>
</div>
<script type="text/javascript">
$('#demo-fixed button.waiting').on('click', function () {
var that = this;
$(this).siblings('.content').waiting({ fixed: true });
setTimeout(function() {
$(that).siblings('button').click();
}, 3000);
});
</script>
</body>
</html>
This is my first post so I hope I've given enough info for people to understand. I could copy the JQuery but there's too much and i'm not sure on the relevant part.
Thanks in advance for any help.
jQuery has a nice tool built in for that -- you'll want to read the documentation
$(document).ajaxStart(function() {
//start spinner
});
$(document).ajaxStop(function() {
//stop spinner
});
$(document).ajaxError(function(event, jqXhr, ajaxSettings, thrownError) {
// handle the error
});

jQuery: Highlight div box onload

This jQuery code will highlight the div box when clicked.
I want to get the highlight on load, how can I do that?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
</script>
</head>
<body">
<div id="div1"></div>
</body>
</html>
Put the statement for highlight in document.ready at the same level you are binding click event..
Live Demo
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000); //this will highlight on load
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
Alternatively, this way might be a little cleaner in that if you add some other effects that you want to show on the click state, you only need to define them one time.
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
$('#div1').click();
});
Javascript
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000);
});
This will highlight the div1 when the document is ready. If you also want a click handler, you can keep it and put in whatever code you want (ie. you can also keep the effect in there as well, if you want to).
Fiddle

Categories

Resources