Could you tell me why this js is working in Firefox and Chrome, but is not working in Internet Explorer? I am trying to solve that 3 days now, and I have no idea why it is not working. I would like this to be working at least on IE 8,9 and 10. I will be really happy if anyone would now how to fix this.
SCRIPT
$(document).ready(function() {
$('<img class="envtop" src="images/envtop.jpg" alt=" "/>').prependTo('#testimo li');
$('<img class="envbot" src="images/envbot.png" alt=" "/>').appendTo('#testimo li');
$('<img class="envshadow" src="images/shadow.png" alt=" "/>').appendTo('#testimo li');
$('.envelope').mouseover(function() {
$(this).find('.envtop').addClass('envani')
.end().find('.envbot').addClass('envani')
.end().find('.list').addClass('listani');
});
$(".envelope").mouseout(function() {
$(this).find('.envtop').removeClass('envani')
.end().find('.envbot').removeClass('envani')
.end().find('.list').removeClass('listani');
});
$('.envelope').click(function() {
$(this).find('.list')
.toggleClass("listmove");
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.33897.js"></script>
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<ul id="testimo">
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
</ul>
</body>
</html>
CSS
.envelope {
width:300px;
height:150px;
position:relative;
padding: 120px 24px 0;
overflow: hidden;
float: left;
-webkit-transition:1s;
transition:1s;
cursor: pointer;
}
.list {
width:236px;
height:180px;
background:white;
padding: 30px 20px 0;
font-size: 16px;
-webkit-transition:1s;
position:absolute;
top:120px;
left:36px;
z-index:2;
-webkit-transition:0.8s;
transition:0.8s;
font-size: 16px;
background:gray;
}
.envtop {
position:absolute;
top:20px;
left: 24px;
z-index:1;
-webkit-transition:0.5s;
transition:0.5s;
}
.envbot {
position:absolute;
top:20px;
left: 24px;
z-index:3;
-webkit-transition:0.5s;
transition:0.5s;
}
.envani {
-ms-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
left: 35px;
top: 10px;
}
.listani {
top:80px;
left: 45px;
}
.envshadow {
position: absolute;
bottom:0;
z-index: 4;
left: 0;
}
.listmove {
top:0px;
}
Can you check the given below jsfiddle link in IE10
LINK
Note : Where you wrote your js code?. Is it external js?. If it is internal(page itself) js you need to write javascript within <script type="text/javascript" language="javascript"> ... </javascript> tag.
Related
Here is my problem:
I have image in one div that is centered into that div.
I want that that image go in header after user scroll once (scroll>50).
Here is my codepen example.
HTML:
<header> <div id="nav"> LINK LINK LINK </div> </header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
CSS:
*{
padding:0;
margin:0;
overflow-x:hidden;
}
#nav{float:right; line-height:70px;}
header{
width:100%;
position:fixed;
padding-left:10%;
padding-right:10%;
background:#fff;
height:70px;
}
#main{
padding-top:100px;
text-align:center;
height:800px;
background:#3cb5f9;}
#main img{width:200px; margin:0 auto;}
There are a ton of ways to do this, but a quick way to achieve this is to duplicated the image so there is a copy of it in the main and the header. On load, have it hidden within the nav. Then, have a scroll event listener that watches for an offset of >50.
If true, => hide main image, and show nav image
If false => show main image. and hide nav image.
Also worth noting I updated the height of main to be 200vh — just to simulate content. This is not related to the answer.
$(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() >= 50){
$("#main img").hide();
$("header img").show();
}else{
$("#main img").show();
$("header img").hide();
}
});
});
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav {
float: right;
line-height: 70px;
}
header {
width: 100%;
position: fixed;
padding-left: 10%;
padding-right: 10%;
background: #fff;
height: 70px;
}
header img {
display: none;
width: 50px;
margin: 0 auto;
}
#main {
padding-top: 100px;
text-align: center;
height: 200vh;
background: #3cb5f9;
}
#main img {
width: 200px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<div id="nav"> LINK LINK LINK </div>
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
</body>
</html>
External Plunker: http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview
I'm learning jQuery and I built my project using xdk, but square is not moving(when button is clicked). I checked it on android 4.4. and nothing(it's working on my pc). Can you help me?
This is my code:
http://jsfiddle.net/T9y7t/
index.html:
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="intelxdk.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div id="all">
<input id="up" type="button" value="UP">
<br>
<input id="lewy" type="button" value="LEWO">
<input id="prawy" type="button" value="PRAWO">
<br>
<input id="down" type="button" value="DOWN">
<div id="game">
<div id="cube">
</div>
</div>
</div>
</div>
</body>
style.css:
html, body{
margin:0;
padding:0;
height:100%;
}
body, div, h1, h2, h3, ul, li, span, img, input {
margin:0; padding: 0; border: 0;
}
body{
background-color: black;
}
#container {
}
#all{
font-size: 20px;
color:white;
display: block;
text-align: center;
margin-left:auto;
margin-right: auto;
width: auto;
height: auto;
background-color: :white;
}
input {
height: 100px;
width: 100px;
}
#game{
margin-left: auto;
margin-right: auto;
position: relative;
top:+10px;
display: block;
background-color: yellow;
width: 200px;
height: 200px;
}
#cube{
position: relative;
background-color: black;
width: 10px;
height: 10px;
left:0px;
top:0px;
}
script.js:
$(document).ready(function () {
var left = $("#lewy");
var right = $("#prawy");
var cube = $("#cube");
var up = $("#up");
var down = $("#down");
var krok = "10px";
left.click(function () {
cube.animate({
left: "-=" + krok
}, "fast");
intel.xdk.notification.vibrate();
});
right.click(function () {
cube.animate({
left: "+=" + krok
}, "fast");
intel.xdk.notification.vibrate();
});
down.click(function () {
cube.animate({
top: "+=" + krok
}, "fast");
intel.xdk.notification.vibrate();
});
up.click(function () {
cube.animate({
top: "-=" + krok
}, "fast");
intel.xdk.notification.vibrate();
});
});
Edit: i tried other build options (crosswalk/cordova) but still nothing
yes, It can be happen, some times,because mobile is the different platform and web is different
if your app works in emulator but not in device, then The api is blocked due to Cross domain access, which is the same reason why your code will not work in any browser. But there is a way to make it work in Intel XDK apps, just add after your intelxdk.js script inclusion. It will then work on device.
More info about AJAX and XDK here: http://software.intel.com/en-us/html5/articles/how-to-access-JSON-data-in-HTML5-apps
Try including <script src="xhr.js"></script> after the <script src="indelxdk.js"></script> inclusion.
I wanna use colorbox for 'join us menu' but it isn't working.
and I also tried fancybox, and got a same result..
actually colorbox performed well until I add mootools v1.1 to my jsp code.
I dont know what is mootools v1.1. I just copy some source that from
some awesome website for
using scroll view effect(I dont know exactly what this effect's name) on my page
scroll view effect is working well. you can see that when you clicked 'append1,2,3'
sorry for my poor english skill.
here is my code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Builder : append your heart </title>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="colorbox.js"></script>
<script type="text/javascript" src="mootools.v1.1.js"></script>
<script type="text/javascript">
$(function(){
$('.joinus').colorbox({
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Times New Roman', serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
#main_header{
width:1280px;
padding-left: 10px;
line-height:60px;
background: #59DA50;
color:#FFFFFF;
}
#main_bar{
overflow: hidden;
background: #EAEAEA;
}
#main_bar>ul.main_bar_left{
overflow: hidden;
float: left;
}
#main_bar>ul.main_bar_right{
overflow: hidden;
float: right;
}
#main_bar>ul.main_bar_left>li{
float:left;
}
#main_bar>ul.main_bar_right>li{
float:left;
}
#main_bar a{
display: block;
padding: 5px 20px;
border-right: 1px solid #BDBDBD;
}
#main_bar a:HOVER{
background: #CEF279;
}
#main_bar input{
margin:5px;
width: 80px;
}
#main_footer{
width:1280px;
margin:0 auto;
margin-bottom: 10px;
background: #353535;
color: #FFFFFF;
text-align: center;
padding: 10px;
}
#main_content {
margin:0px;
overflow:hidden;
/*height:387px;
width:99,9%;*/
border:none;
position:relative;
}
#main_content_bg {
width:5000px;
height:600px;
background-image:url(http://placehold.it/5000x600);
background-position:top left;
background-repeat:no-repeat;
background-color:#E6E6E4;
position:relative;
}
.section_content {
width:990px;
height:380px;
position:absolute;
}
#section1 {
left:0px;
top:0px;
}
#section2 {
left:1570px;
top:0px;
}
#section3 {
left:2880px;
top:0px;
}
</style>
</head>
<body>
<header id="main_header">
<h1>Spring Builder</h1>
</header>
<nav id="main_bar">
<ul class="main_bar_left">
<li><a id="append1" href="#">append1</a></li>
<li><a id="append2" href="#">append2</a></li>
<li><a id="append3" href="#">append3</a></li>
</ul>
<ul class="main_bar_right">
<li><input type="text" value="id" id="id" name="id"/></li>
<li><input type="password" id="pw" name="pw"/></li>
<li>Login</li>
<li>Join us</li>
</ul>
</nav>
<div id="main_content">
<div id="main_content_bg">
<div id="section1" class="section_content">
<h1>section1</h1></div>
<div id="section2" class="section_content">
<h1>section2</h1></div>
<div id="section3" class="section_content">
<h1>section3</h1></div>
</div>
</div>
<footer id="main_footer">
</footer>
<script src="scrollstyle.js" type="text/javascript"></script>
</body>
</html>
It's probably happen a conflict between Mootools and jQuery because both libraries are using $ sign, try to convert $ to jQuery for your jQuery code:
jQuery(function(){
jQuery('.joinus').colorbox({
});
});
or wrap your code inside:
jQuery(function($) {
$('.joinus').colorbox({
});
});
hi guys im new with web programming using html, css, javascript and jquery. i have this code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>My test Site</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cssTest.css">
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id = "divMain">
<div id="div1">
<img src = "1.jpg" disabled="disabled">
<img src = "2.jpg" disabled="disabled">
<img src = "3.jpg" disabled="disabled">
</div>
<div id="div2">
<img src = "4.jpg" disabled="disabled">
<img src = "5.jpg" disabled="disabled">
</div>
</div>
<div id="div3">
<div class="myCanvas" width=100% height=100%; ></div>
</div>
</body>
</html>
JS :
$(document).ready (function(){
$("a").click(function(){
$(".myCanvas").fadeIn();
$(".myCanvas").html ($(this).html());
});
});
CSS :
body{
background-color: grey;
}
#div1,#div2{
border:solid;
border-color: red;
}
#div1 img{
position: relative;
border: solid;
border-color: blue;
margin:5px;
z-index:1;
}
#div2 img{
position: relative;
border: solid;
border-color: blue;
z-index:1;
}
#div3{
background-color:black;
position: relative;
position-align: center;
top:-500px;
z-index:2
}
.myCanvas{
position: relative;
background: solid;
background-color: grey;
opacity: 0.5;
width:100%;
height:100%;
display: block;
z-index:3;
}
what I am trying to do is whenever i click on an image i would like to make the image appear in the middle with an opaque background that will be covering the other images.
Thank you guys for the help and sorry for the noob question.
You could consider using Fancybox; it gives you the functionality you're looking for.
HERE you can find the solution :)
jsFiddle
HTML
<div id="privacy">OPEN ME</div>
<div id="bgrprivacy"></div>
<div id="privacyopen">
I'M OPEN!!
</div>
CSS
#privacy{
text-decoration:none;
color:#999;
font-size:12px;
cursor:pointer;
}
#privacyopen{
display:none;
background:white;
height:30%;
width:50%;
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index:101;
overflow: scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
padding:20px;
}
#bgrprivacy{
display:none;
background-color:rgba(0,0,0,0.4);
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index:100;
width:100%;
height:100%;
cursor:pointer;
}
jQuery
jQuery(document).ready(function($){
$("#privacy").click(function(){
$("#privacyopen").fadeIn();
$("#bgrprivacy").fadeIn();
$("body").css("overflow", "hidden");
/*$("header").css("z-index", "1");*/
});
$("#bgrprivacy").click(function(){
$("#privacyopen").fadeOut();
$("#bgrprivacy").fadeOut();
$("body").css("overflow", "auto");
/*$("header").css("z-index", "1");*/
});
});
Ps: it contains some code that you don't need it because I forgot to delete it :) ( I did this for my website! )
I have a sliding boxcaption and it works fine. But when you first view it has the box caption over it and then when you mouse over it works properly but it starts off with the caption on top. And I want the box caption only to show when the user mouses over the box. I cant figure out why it does that. It's kind of odd.
Take a look at it here so you can see what I am talking about.
http://ironbulldog.com/windows/test.html
Below is my source code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing</title>
<style type="text/css">
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5; }
h3{ margin: 190px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0px 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 260px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
</style>
<script type="text/javascript" src="http://www.microsoft.com/library/shared/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
});
//Header Text Comes in Later
$('.boxgrid.slidedown').hover(function(){
$(".delay", this).stop().animate({top:'0px'},{queue:false,duration:500});
}, function() {
$(".delay", this).stop().animate({top:'260px'},{queue:false,duration:500});
});
});
</script>
</head>
<body>
<div class="boxgrid slidedown">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<div class="delay boxcaption">
<h3>The Nonsense Society</h3>
</div>
</div>
</div>
</body>
</html>
Add this line to your css
.boxcaption.cover { top: 260px; }
just add top:260px to .boxcaption in your css