Asp.Net&JavaScript: Problem With Image Slide - javascript

I'm trying to slide background on hover.
I used the code below in HTML webpage once and it worked correctly.
But when I tried to use it in my ASPX page, first it gave this error:
"Microsoft JScript RunTime Error: '$' is undeclared"
So I deleted the 1st $ before function(). But I couldn't make it work still.
Any ideas why it does not work?
Code is:
<head runat="server">
<title></title>
<script type="text/javascript">
$(function () {
$("#vertical div a").hover(function () {
$("img", this).stop().animate({ top: "-173px" }, { queue: false, duration: 400 });
}, function () {
$("img", this).stop().animate({ top: "0px" }, { queue: false, duration: 400 });
});
});
</script>
<style type="text/css">
.altikisilik
{
display: block;
background: url('Images/Default/Brazil_bg.png') top;
}
#vertical div
{
position: relative;
overflow: hidden;
}
#vertical img
{
position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="vertical" class="clear" runat="server">
<div>
<a class="altikisilik" href="Default.aspx">
<img src="Images/Default/Brazil.png" border="0" alt="Brazil" />
</a>
</div>
</div>
</form>
</body>

I can't see the jQuery script include anywhere in your code. I think that would be the issue

You must include jquery library above the rest of your javascript.
<script src="http://code.jquery.com/jquery-1.6.2.min.js" />

you should download the jquery.js from the site:www.jquery.com .Or use the google api support .In fact you should import the jquery file. choose one of the below:
this method you should put the jquery-1.6.2.min.js download from the site www.jquery.com to the folder where you put your sites,
or simply use the google support :

Related

onload function in jquery not working on refresh

I am new to jquery. I have a simple project. Two pictures stacked on top of each other. I want the page to show the second picture first (so the page needs to start at a certain scroll point) and then the user can scroll up to the first picture. So the code would go something like that
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
This works when I first load the page, but it doesn't work if I refresh the page (I assume because of something to do with cache?). How can I make the onload function work also when the page is refreshed? Thanks for your time.
If you are using jq why don't you use this type of function on $(document).ready()
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load is page load moment and beforeunload is refresh page moment
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
So if it's working first time, your code is ok. But seems you have to force to delete page cache.
Try this options:
Add this meta tags to your head and give it a try.
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
If you want to control by js the delete of the cache, you can try making a simple js function:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}

hide pop-out in google docs viewer using javascript-jquery

I am using google docs viewer to display word and PDF files in dialog in my application. But my client need that document should not get download. So want to hide 'Pop-out' option. Please help me for it. Below is my code snippet :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: '',
width: 750,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<iframe id='resViewer' src='https://docs.google.com/viewer?url=my_file.pdf&embedded=true' style='width: 700px; height: 700px;' frameborder='0'></iframe>";
$("#dialog").html(object);
}
});
});
});
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
Please help me.
If anyone knows any other way to display word and PDF file both give me way or suggest for this.
Thanks.
The following CSS will remove the pop out button.
div[aria-label="Pop-out"] {
display: none;
}
div["aria-label=toolbar"] {
width: 52px;
}
But to get the CSS to apply to the iframe your going to have to do some trickery. See jQuery, select element inside iframe, which is inside an iframe and How to apply CSS to iframe?

Placement of absolutely positioned elements incorrect when printing

I am currently facing a strange problem (well, most probably I am simply not aware of something important here).
I have the following html snippet
<div id="test">
Hallo Welt
</div>
And the following javascript snippet:
<script type="text/javascript">
$(function () {
$('#test').offset({
position: 'absolute',
width: '100px',
left: ($('body').width() - $('#test').width()) / 2.0
})
});
</script>
This should render the test div horizontally centered which works perfectly fine within the browser. When I try to print this page however, the element shows up on the right corner of the printed page and not in the middle.
I thought maybe theres something wrong about using pixels for positioning elements for printing so I tried other measures like em:
<script type="text/javascript">
$(function () {
$('body, #test').css({ 'font-size': '12px' });
$('#test').css({
left: (($('body').width() - $('#test').width() ) / 24.0) + 'em'
})
});
</script>
But unfortunately the result is all the same, no matter what browser I try...
What am I missing here?
#
In response to Adrian I made a sample as simple as possible to extract the problem reproducable for everyone.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: ($('body').width() - 100) / 2.0
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
I also observed that the position of #test within the printed document is dependant on the size of the browser window at the time of printing.
I am actually working with media queries as well in my real project. I was trying to convey an extremely simply sample as a showcase for the problem.
This is also interesting and the root of the evil in my opinion. Even though the printer uses its 100px from the print media query, its executed javascript returns that the test div ist still 100% which is just wrong in my opinion!!!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').text($('#test').width());
});
</script>
<style type="text/css">
#test {
width: 100%;
border: 1px solid black;
}
#media print {
#test {
width: 100px;
}
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
EDIT: Newer Solution with js only...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: '50%',
marginLeft: '-50px'
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
CSS solution
In this situation I would use CSS #media print {} to target printing.
Im assuming you have a reason for using javascript to build your CSS but if not I would recommend coding this in a totally different way. This shouldnt require javascript, nor should it require an absolute position.
Anyway , solution below...
<html>
<head>
<style>
#media print {
#test {
left:50% !important;
margin-left:-50px;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: ($('body').width() - 100) / 2.0
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>

Script isn't working

I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#info_box {
height: 221px;
width: 221px;
}
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
<img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
<img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
<span class="custom info">
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div#trigger').click(function() {
//Get info_box
var info = $('div#info_box');
//Fade the box in during 1 sec, show it for 5, and let it fade out again
info.fadeIn(1000).delay(10).fadeOut(1000);
});
});
</script>
I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.
Google chrome says Uncaught Reference Error: $ is not defined
but I'm not sure what to do with that.
If more information could help please ask which and I'll put it up.
Please include Jquery to the top of the scripts as many plugin use it.
http://jquery.com/download/
Add this link to <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You need jquery reference when using $

show image onclick javascript

How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.
The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.
I'm trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.
How can i get this done?
Html such as below for each thumbnail image should do the trick
<a href="[url to original image]" target="_blank" id="thumbnail_link">
<img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>
Edit: Modified to illustrate use of FancyBox.
Use above markup along with below java-script:
$(document).ready(function() {
$("a#thumbnail_link").fancybox();
})'
Don't forget to include jquery and fancybox js files.
I think you have to show thumbnails first and on click you need to open the original images in a new pop up window. You can do this using code as given below -
<SCRIPT LANGUAGE="JavaScript">
function openImage(imageFile){
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420');
windowOpen.document.writeln("<head><title>Image</title></head><body>");
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>');
windowOpen.document.writeln("</body></html>");
}
</SCRIPT>
Then call this openImage() method during onClick of the thumbnail image.
You can pass imageFile as parameter to the function.
It sounds like you have both images referenced in your HTML, even though one is hidden from view, so the browser requests both. What you'd need to do is use JavaScript to create the full size <img> tag from scratch and then add it to the relevant place in the HTML. The browser will then load the full size image once it's added to the DOM.
For fancy box, all you need to do is
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Regards,
Andy.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://identify.site88.net/showimage.js'></script>
<style type='text/css'>
#test{
display:none
}
#blackout {
width:50%;
position:absolute;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 20;
}
.modal {
margin: auto;
}
#close {
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('img').click(function () {
var img = $(this).clone().addClass('modal').appendTo($('#blackout'));
$('#blackout > #close').click(function () {
$('#blackout').fadeOut(function () {
img.remove();
});
});
$('#blackout').fadeIn();
});
});
$(window).load(function(){
$('#close2').hide();
$('span').click(function () {
$('#test').show();
$('#close2').show();
$('#txtsp').hide();
$('#blackout2 > #close2').click(function () {
$('#blackout2').fadeOut(function () {
$('#test').hide();
$('#txtsp').show();
$(this).css({
"text-decoration": ''
});
});
});
$('#blackout2').fadeIn();
});
});
</script>
</head>
<body>
<div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span>
<br /><br />
<div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div>
</body>
</html>
You can replace tag span by your image have been scaled on server side.

Categories