HI
i am using
<input type="file">
it has different UI on IE, Firefox, Chrome and Safari
i want something that can generate same UI on all 4 browser.
Is this possible?
http://pixelmatrixdesign.com/uniform/
Uniform will allow you to easily skin the input element for uploads.
Many browsers (at least recent versions of Firefox) don't allow you to type a filename any more, as a security precaution. You can only select a file graphically. I believe Chrome is the same way.
What sort of UI are you talking about? If you mean another way to select a file... I don't think there's another way (also a security precaution).
this did the work for me :)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
div.fileinputs {
position: relative;
}
img.fakefile, input.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}</style>
<script type="text/javascript">
function HandleFileButtonClick()
{
document.getElementById("xyz").value =document.getElementById("abc").value;
}
</script>
</head>
<body>
<div class="fileinputs">
<input type="file" id="abc" class="file" onchange="HandleFileButtonClick();" />
<input type="text" id="xyz" class="fakefile" />
<img src="browse button.bmp" class="fakefile" style="position: absolute; left: 150; top: 0" width="61" height="22"/>
</div>
</body>
</html>
Related
So, i've been searching in everywhere for a resolution to my problem, but i think i've tried everything but my code is not working at all.
I'm trying to put some text of a txt file in a iframe, and it's actually reading it, but, when i try to change the css, appears the message in the title: "The character encoding of a framed document was not declared."
This is my code:
<!DOCTYPE html>
<html lang = "pt">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
h1{
position: absolute;
left:85px;
top:0px;
}
.LOGO{
position: absolute;
width:70px;
height:70px;
z-index: 2;
}
.portugal{
position: absolute;
top: 65px;
left: 0px;
width:auto;
height:auto;
z-index: 1;
}
.PT01{
position: relative;
top: 438px;
left:560px;
width:20px;
height:20px;
z-index: 3;
}
</style>
</head>
<body>
<script>
var x = document.getElementsByTagName("PT01");
if(x.id == 'PT01'){
$("#div1").css("border-style","none");
$("#div1").css("position",'relative');
$("#div1").css("top",'315px');
$("#div1").css("left",'535px');
$("#div1").css("width",'auto');
$("#div1").css("height",'auto');
$("#div1").css("zIndex",'4');
}
</script>
<img class = "LOGO" src = "http://www.chronopost.pt/sites/all/themes/custom/quimera/favicon.ico"/> <h1> Informações Package Chronopost </h1>
<img class = "portugal" src = "http://s2.thingpic.com/images/HV/9N2YRDXBuosfkppy9Jut8Tvx.png"/>
<img class = "PT01" name = "PT01" src = "http://www.chronopost.pt/sites/all/themes/custom/quimera/favicon.ico"/>
<iframe id='div1' src = "PT01.txt">
</iframe>
</body>
</html>
I hope you can help me with this! I'm just a student and i'm trying to learn more.
Thank you!
Possible duplicate here
You can try this, add this between your iframe tag:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at
jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/
You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);
I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;
I want the following behavior to happen.
1) User clicks on a link on my site
2) I show text which says the next page is loading
3) Then the user goes to the next page.
4) If the user clicks Back to go to the original page, the text which says loading is no longer there.
I don't know how to implement #4. I've tried window.onbeforeunload but couldn't get it to work properly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="loadingDiv" style="display:none;">
This should show when I click on link. This should not show when users leaves this page and then clicks back.
</div>
<script>
$(function() {
$('.button').click(function() {
$('#loadingDiv').show();
});
});
</script>
<br><br>
<a class="button" href="http://www.google.com">Open google</a>
</body>
</html>
It's radically different from what you have attempted, but with some modifications, you could have similar functionality to what I have achieved with this. It adds some nice little AJAX animations while changing pages;, triggering a dark but opaque overlay div and a loading div each with fixed positioning.
the jquery
$('a.animate').click(function(){
var href = $(this).attr('href'),
toLoad = href+' #main-content';
$('#overlay').show();
$('#loader').show();
$('#page-content').hide();
$('#main-content').load(toLoad,'', function(){
$('#main-content').show('fast',function(){
$('#loadingDiv').hide('slow',function(){
$('#overlay').hide();
});
});
});
window.location = href;
return false;
});
the html
<div id="loader" class="bubblingG">
<img src="your-ajax-img" style="height: 100%; width: 100%"/>
</div>
<div id="overlay"></div>
<div id="main-content">
<div id="page-content">
<!-- your page content goes here-->
</div>
</div>
the css
#loader {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
margin-top: -31.5px;
margin-left: -50px;
height: 63px;
width: 100px;
display: none;
}
#overlay{
position: fixed;
z-index: 995;
top: 0px; right: 0px; bottom: 0px; left: 0px;
background: #333;
opacity: 0.4;
display: none;
}
NOTE You can't nest #loader within #overlay or it will inherit the opacity from #overlay. This is a known problem with CSS, so you have to position it by itself with z-index and normal positioning methods to prevent opacity in your #loader div.
You can hide the loader with delay:
$('.button').click(function() {
// show just 2 sec
$('#loadingDiv').show().delay(2000).hide();
});
I have am image on my page and i am changing its image source with java script.
All I need is to change this image with some beautiful sliding effect.
What I want is when i click on a button to change the image, the first image should disappear and another one should show in some some decent way (not like a jerk or blink)
You can put second image behind the first one, and then make fadeout() efect on the first image.
use this code
$(".firstimage_classname").fadeout();
$(".secondimage_classname").fadeIn();
you can give time interval as well.
otherwise try
$(".firstimage_classname").slideUp();
$(".secondimage_classname").fadeIn();
Try This Code
$(".YourClassSelector").fadeIn(1000).delay(2000).fadeOut(2000, function () {
var $next = $(this).attr('src','http://abc.com/logo.png');
});
Hope it would helps you.
Enjoy
Here you go example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Srtict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.front{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 10;
}
.back{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">
<img src="1.jpg" class="front" />
</div>
<script type="text/javascript">
$(function(){
$('.front').click(function(){
$('#content').append('<img src="2.jpg" class="back" />');
$(this).fadeOut(500, function(){
$('.front').remove();
$('.back').addClass('front').removeClass('back');
});
});
});
</script>
</body>
</html>
I am relatively new with Javascript but managed to somehow get this code to work on chrome, firefox, safari but it doesn't properly on IE. First look at this code and then after that I will explain what seems to be not working:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.domain.com/test/wtf.css" />
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var transition = 'slow';
var target1 = $('#flash1');
var target2 = $('#flash2');
var target3 = $('#box2');
var target4 = $('#tble');
var target5 = $('.links');
var target6 = $('#wording');
target1.delay(1000).fadeIn();
target2.delay(2000).fadeIn();
target3.delay(3000).fadeIn();
target4.delay(4000).fadeIn();
target5.delay(5000).fadeIn();
target6.delay(6000).fadeIn();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#this_is_button").click(function () {
$("#box2").hide();
$("#tble").hide();
$(".links").hide();
$("#second_pls").show();
$("#box2").css("background", "black");
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#what_close").click(function () {
$("#second_pls").hide();
$("#tble").show();
$(".snap").show();
$(".links").show();
$("#box").css({
backgroundImage: "url('/test/img.jpg')",
backgroundSize: "800px"});
});
});
</script>
</head>
<body>
<div id="box">
<div id="box2" style="display:none"></div>
<div id="wording" style="display:none">
<label id="flash1" style="display:none">Hello</label>
<label id="flash2" style="display:none">World</label>
</div>
<div id="tble" style="display:none">This is a table</div>
<div id="second_pls" style="display:none">Hello Hello Hello, is this working? come on already?!!
<input type="button" id="what_close" value="Close">
</div>
<div class="links" style="display:none">
<input type="button" id="this_is_button" value="Sample">
</div>
</div>
</body>
</html>
CSS:
#box {
background-color: #000000;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#box2 {
background-image: url("/test/img.jpg");
background-size: 800px;
height: 550px;
margin-left: auto;
margin-right: auto;
width: 800px;
position: absolute;
}
#wording {
position: relative;
color: #999999;
font-size: 15px;
letter-spacing: 5px;
margin-left: 20px;
padding-top: 30px;
}
#tble {
margin-top: 180px;
position: absolute;
}
#second_pls {
margin-left: 10px;
margin-top: 310px;
position: absolute;
}
.links {
margin-left: 10px;
margin-top: 310px;
position: absolute;
}
So what is the part that doesn't seem to function when the page is rendered in IE? It seems that the fadeIn, fadeOut, hide and show parts are not rendering in IE except #flash1, and #flash2 work, the rest of the fade in, fade out don't work. I am ripping my hair out not understanding why those two would work but not the rest.
I used BrowserStack and it seems that on Windows XP using IE 8 it renders properly with the exception of properly rendering the background image. But on Windows 7 using IE 8, it works the same way as it does on Windows XP but when using IE 9 it gives me the current issue.
What am I doing wrong?
It seems the problem arise from incorrect syntax:
$("#box").css({
backgroundImage: "url('/test/img.jpg')",
backgroundSize: "800px", //<-- extra comma
});
http://jsfiddle.net/bfcZd/3/
vs.
http://jsfiddle.net/bfcZd/4/
You should look at the CSS declarations for the two divs that are working. I suspect they may be position:relative or have some other property that is causing them to render differently (properly) while the other ones fail. Could you provide the CSS that you have set for the divs in your example. It will help us troubleshoot a little better, but without seeing it, this is my hunch.
add this meta tag inside your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
should work then.
i have it here in this jsfiddle: http://jsfiddle.net/Morlock0821/XtyWC/