I've been working on this html code that allows an image to blink as well as auto resize to the browser size. I have the code working that will allow it to blink:
<html>
<head>
<script type="text/javascript">
function blink() {
var e = document.getElementById("blinker");
e.style.visibility = ( e.style.visibility == 'visible' )? 'hidden' : 'visible';
setTimeout("blink();", 1000);
}
</script>
<body onload="blink();">
<table id="table">
<tr><td>
<img id="blinker" src="plesk_logo_fist_2.png">
</td></tr>
</table>
</body>
<style type="text/css">
html, body {
max-width:100%;
max-height:auto;
}
#table {
max-width:100%;
max-height:auto;
text-align: center;
vertical-align: middle;
}
#table img {
max-width:100%;
max-height:auto;
}
</style>
And the code that will resize:
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="plesk_logo_fist_2.png">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
setTimeoutInterval(2000,function(){$
(".element").css({backgroundColor:"none"});});
});
</script>
But, I can't seem to get them working together. Any help to get these to work together (or using alternative method) would greatly appreciated.
Put your function blink script right above your set body height script.
Related
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
if($(window).width() < 767){
$("#second").insertBefore("#first"); }
else{
$("#first").insertBefore("#second"); }
});
});
</script>
I want to change the html element. In the above code nothing is wrong but when our screen size has already small (< 767) it will not work due to resize() function and when we remove resize function then it will work but it failure when we increase the screen size. It can't change the element.
Actually i am looking a solution like #media css property. We all Know when we use media we can see the effect through inspector. I got a code but it will not working
document.querySelector('style').textContent += "#media screen and (max-width:767px) {"+
$("#second").insertBefore("#first");+" }";
Actually the code was not same. I edited and try to run but not working.
How to change elements like in small screen with media query? or any other solution but must be responsive
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
change();
});
change();
});
function change(){
if($(window).width() < 767){
$("#second").insertBefore("#first");
}
else
{
$("#first").insertBefore("#second");
}
}
</script>
Do you mean to swap html elements according to screen width? If so, why not use CSS?
<style>
.hidden {
display: none;
}
#media screen and (min-width: 768px) {
#first-copy, #second-copy {
display: block;
}
#first, #second {
display: none;
}
}
</style>
<html>
<div id="first" style="border: 1px solid; width: 100px; text-align: center">
<p>
first element
</p>
</div>
<div id="second" style="border: 1px solid; width: 100px; text-align: center">
<p>
second element
</p>
</div>
<div id="second-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
<p>
second element
</p>
</div>
<div id="first-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
<p>
first element
</p>
</div>
</html>
https://jsfiddle.net/8sug5pws/2/
U can use #media screen
for example:
#media screen and (max-width: 480px) {
#info {
font-size: 0.6em;
}
In CSS Of course
try this code its working fine...
resize_solution();
$(document).ready(function(){
$(window).resize(function() {
resize_solution();
});
});
function resize_solution(){
if($(window).width() < 767){
$("#second").insertBefore("#first");
}
else{
$("#first").insertBefore("#second"); }
}
You must use .trigger(resize);
So HERE is the code. I simple want to change the color of the h1 heading when the scroll is 1000px from top. I would like to use purely javascript for this purpose.Please try and ignore how poorly the code has been written. Any suggestion would be more than welcome. Thank you for you time.
<html> <head> <title> scroll </title>
<!-- CSS !-->
<style> .redbox {
background-color: red;
position: absolute;
top: 10px;
height: 90px;
width: 100px;
} .reveal {
position: fixed;
top:450px;
transition: width 2s;
display: block;
} </style>
</head>
<!-- HTML !-->
<body>
<div class='redbox' id='red'> , </div>
<h1 class='reveal' id='demo'> The comes up on 1000 scroll! </h1>
<h1 style='position: absolute;top: 1900px;'> END </h1>
<!-- JS !-->
<script>
var top = window.pageYOffset || document.documentElement.scrollTop
if (top == 1000) {
document.getElementById('demo').style.color = 'red'}
</script> </body> </html>
You could check the current scroll offset using an event handler:
document.body.addEventListener('scroll', function() {
if(window.scrollY > 499) {
document.getElementById('myDiv').classList.add('appear'); // or whatever...
}
});
I have a html file which positions one image on top of another. However I wish to that the superimposed image can be dragged around by the user, confined within the boundaries of the underlying image. Anyone may be kind enough to provide suggestions?
<html>
<head>
<style type="text/css">
#about {
z-index:1;
position:absolute;
top:10%;
left:3%;
opacity: 0.6;
}
#main-content-image {
height:100%;
position:relative;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(function () {
var img = new Image();
$(img).load(function () {
$('#main-content-image').append(this);
}).attr('src', 'foo.jpg');
});
});
</script>
</head>
<body>
<div id="main-content-image">
<img id="about" src='bar.jpg'>
</div>
</body>
</html>
You just need to use the function draggable from jQuery UI.
$(document).ready(function () {
$(function () {
$("#draggable").draggable();
});
});
Here is a working example:
https://jsfiddle.net/rv8kcjqd/
You can use the jQueryUI Draggable Widget which allows you define a containment setting, which will not allow moving outside of the bounding box.
Here's a small example:
$(function() {
$("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false });
});
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
<p>I'm contained within the box</p>
</div>
</div>
I am trying to make a background slide show effect. What i have managed to do is to make this slideshow but without any beautifully effect like sliding or other image appearing effect. Can someone help with some advice in creating the effect of sliding or any other more beautiful effects.
Here what I managed to do:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class='bannerbg'>
<div class='slider'></div>
</div>
</body>
</html>
CSS CODE
body{
margin: 0px;
margin-left: 0px;
}
.bannerbg{
background-size: cover;
position: relative;
height: 500px;
}
.bannerbg img{
width: 100%;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
position: relative;
margin: 0 auto;
top: -370px;
}
JavaScript CODE
$(document).ready(init)
images=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg"
);
function init(){
$('.bannerbg').prepend("<img id='principala' src='"+images[1]+"' />")
}
function left() // functia data schimba cu locul indexul din array la stinga cu 1 unitate
{
images.push(images.shift());
}
function change(){
p=document.querySelector("#principala");
p.src=images[1];
}
setInterval("left(); change()",1000);
I slide the elements by using the animate function and by setting the css property and animation time in miliseconds for that element, like that:
jQuery( "#slid_img1" ).animate({marginLeft: 0}, 250);
It slides very nicely then.
So, you could adapt your code to use the animate function to make the slide animate.
I'm trying to change the cursor to a custom image with a sound effect. My current problem is the cursor disappears but the replacement image does not show up, and the sound clip is not playing. What did I do wrong?
<head>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1152px;
height:864px;
z-index:2;
left:25px;
top:25px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function setCursor() {
oBoxInner.innerText=sInput.value;
oBoxInner.style.display='block';
oBox.style.cursor="crosshair.gif";
}
</SCRIPT>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML="<embed src=\""+gunshot.mp3+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body bgcolor="#000000">
<div id="apDiv1">
<span id="gunShot" onclick="playSound('gunshot.mp3');">
<a href="3.html" onmouseover="setCursor" onmouseclick="playSound('gunshot.mp3')"> <img src="score.gif" width="1152" height="864" alt="yep" />
</a></span>
</div>
</body>
Thank you for your help.
EDIT:
I'm using dreamweaver with both PC and Mac for multiple browser compatibility, mainly IE, Firefox, Chrome, and Safari. I was thinking the .gif might be part of the issue instead of .cur. The other cursor code I'm using is this:
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#test-area').mouseout(function(){
$('#mycursor').hide();
return false;
});
$('#test-area').mouseenter(function(){
$('#mycursor').show();
return false;
});
$('#test-area').mousemove(function(e){
$('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
});
});
</script>
<style type="text/css">
#test-area {
height: 1152px;
width:864px;
border: 3px dashed #CCCCCC;
background: #FFFFFF;
padding: 20px;
cursor: none;
top: 25px;
left: 25px;
z-index:1;
}
#mycursor {
cursor: none;
width: 100px;
height: 100px;
background: url(crosshairs.cur);
repeat: no-repeat;
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 10000;
}
</style>
</head>
<body bgcolor="#000000">
<div id="test-area">
Move mouse over this area.
</div>
<div id="mycursor">
</div>
</body>
you have a few errors in the code
oBox is not defined. oBox.style.cursor="crosshair.gif";
The cursor is best to be .cur
the embed tag i only think supports MIDI, and your referencing gunshot.mp3 in your oncick and trying to call reffrence to \""+gunshot.mp3+"\" in the src, should be soundfile
and you have document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML TWICE?
What browsers are you wanting to support the sound? Netscape, IE6, Chrome.. ect