This piece i am creating is a comic.
the comic images will be hidden until a user clicks the mouse
the hope is that the images will then reveal them self one at a time (per users click)
at the moment however when one image is shown it will dissapear when the user clicks to show the next image
how can i set it up so that the image doesnt dissapear when the user clicks?
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: #1F2A22;
}
h1 {
color: #00ff00;
}
</style>
</head>
<body>
<img id="fans6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="fans6.png">
<img id="impact6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="impact6.png">
<img id="text6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text6.png">
<img id="panel7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel7.png">
<img id="atom7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="atom7.png">
<img id="fantext7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text fan7.png">
<img id="text7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text7.png">
<img id="fans7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="fans7.png">
<img id="panel8"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel8.png">
<img id="bang8"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="bang8.png">
<img id="panel9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel9.png">
<img id="reporter9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="reporter9.png">
<img id="text9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text9.png">
<img id="panel10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel10.png">
<img id="full10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel full10.png">
<img id="text10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text10.png">
<img id="end10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="the end10.png">
<script>
var curImage = 0;
var images = ["fans6","impact6","text6"];
function windowClick() {
document.getElementById(images[curImage]).style.opacity = "0";
if(curImage < images.length - 1)
{
document.getElementById(images[0]).style.opacity = "1";
curImage = 0;
}
}
window.onclick = windowClick;
</script>
</body>
</html>
By removing this line
document.getElementById(images[curImage]).style.opacity = "0";
The image won't disappear when a user clicks.
But i guess you should modify your code a little (I don't think current version will work the way you want it to work)
function windowClick() {
if(curImage < images.length - 1)
{
document.getElementById(images[curImage]).style.opacity = "1";
curImage++;
}
}
Because every time you should increment the curImage and then display the image with index curImage to show the next image.
Additionally to script problems pointed out by void, it seems all of your images lie on top of each other due to same absolute position and size, so that one of them will occlude all others.
Related
How i can scroll text one by one without out from the box and make it work in chrome and firefox.
<div style="position:absolute; top:0px; left:0px; right:0px; height:80px; overflow:hidden; display:block; border:solid 1px gray; padding:2px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;">
<marquee behavior="scroll" direction="up" scrollamount="5" style="width:100%; height:100%; vertical-align:middle; cursor:pointer;" onMouseOver="this.setAttribute('scrollamount', 0, 0);this.stop();"
OnMouseOut="this.setAttribute('scrollamount', 2, 0);this.start();">
<ul id="list" >
<li id="1">aaaaaaaaaaaaaaaaaaaaaaaaaaaa.</li>
<li id="2">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.</li>
</ul>
</marquee>
</div>
If I got you question correctly, you are trying to move one <li> at a time, so you have given the wrapper specific height of 80px, just add margin-bottom:80px to each <li> element, that will do it.
<div style="position:absolute; top:0px; left:0px; right:0px; height:80px; overflow:hidden; display:block; border:solid 1px gray; padding:2px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;">
<marquee behavior="scroll" direction="up" scrollamount="5" style="width:100%; height:100%; vertical-align:middle; cursor:pointer;" onMouseOver="this.setAttribute('scrollamount', 0, 0);this.stop();" OnMouseOut="this.setAttribute('scrollamount', 2, 0);this.start();">
<ul id="list">
<li id="1" style="margin-bottom:80px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaa.</li>
<li id="2" style="margin-bottom:80px;">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.</li>
</ul>
</marquee>
</div>
I am having the divs bellow:
<div style="width:800px; height:420px; position:absolute; top:0px; left:0px; z-index:10; background-image: url('https://3t27ch3qjjn74dw66o1as187-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/052516-800x420-vege-Wallpaper.jpg'); background-repeat:no-repeat;">
<div style="width:100px; height:100px; position:absolute; top:30px; left:100px; z-index:10; background-image: url('https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif'); background-repeat:no-repeat;"></div>
<div style="width:100px; height:100px; position:absolute; top:30px; left:300px; z-index:10; background-image: url('https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif'); background-repeat:no-repeat;"></div>
<div style="width:200px; height:30px; position:absolute; top:210px; left:300px; z-index:10; font-size:40px; color:#000; text-align:center;">SOME TEXT</div>
</div>
is there any possibility to merge them as a single image and upload it to server?
I tried html5 canvas but a lot of times it returns a blank image.
Is it possible to do this with another way?
It's important to keep the z-index of each div and position
Thank you all
First get html2pdf https://github.com/spipu/html2pdf
require_once dirname(__FILE__).'/../vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;
use Spipu\Html2Pdf\Exception\Html2PdfException;
use Spipu\Html2Pdf\Exception\ExceptionFormatter;
$html_content = '<div style="width:800px; height:420px; position:absolute; top:0px; left:0px; z-index:10; background-image: url(\'https://3t27ch3qjjn74dw66o1as187-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/052516-800x420-vege-Wallpaper.jpg\'); background-repeat:no-repeat;">
<div style="width:100px; height:100px; position:absolute; top:30px; left:100px; z-index:10; background-image: url(\'https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif\'); background-repeat:no-repeat;"></div>
<div style="width:100px; height:100px; position:absolute; top:30px; left:300px; z-index:10; background-image: url(\'https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif\'); background-repeat:no-repeat;"></div>
<div style="width:200px; height:30px; position:absolute; top:210px; left:300px; z-index:10; font-size:40px; color:#000; text-align:center;">SOME TEXT</div>
</div>';
## get html2pdf https://github.com/spipu/html2pdf
$html2pdf = new HTML2PDF('P', 'A4');
$html2pdf->writeHTML($html_content);
$file = $html2pdf->Output('temp.pdf','F');
# CONVERT PDF TO IMAGE
$im = new imagick('temp.pdf');
$im->setImageFormat( "jpg" );
$img_name = time().'.jpg';
$im->setSize(800,600);
$im->writeImage($img_name);
$im->clear();
$im->destroy();
I have three different names in my div class. I can run one class name with jQuery. But i can not run tree class name with jQuery. is anyone can help me.
in this study can only use such p_img. p_img, p_img2 and tree_img these three classes. How can I use in a single JavaScript.
This is my JSFiddle demo
This javascript code for image crop for one div ( p_img )
$('.p_img img').each(function() {
var image = $(this),
height = image.height(),
width = image.width();
if (width > height) {
image.addClass('height');
var middle = 0 - (image.width() - image.closest('.p_img').width()) / 2;
image.css('margin-left', middle + 'px');
} else {
var middle = 0 - (image.height() - image.closest('.p_img').height()) / 2;
image.css('margin-top', middle + 'px');
}
});
HTML CODE:
<div class="profile_cover_container">
<div class="cover_container">
<div class="cover_img">
<div class="p_img">
<a href="#">
<img src="http://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="198" padding="0" />
</a>
</div>
<div class="p_img">
<a href="#">
<img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="198" height="auto" padding="0" />
</a>
</div>
</div>
<div class="cover_img_big">
<div class="p_img2">
<a href="#">
<img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="400" height="400" padding="0" />
</a>
</div>
</div>
<div class="cover_tree_img">
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
</div>
</div>
</div>
and CSS CODE:
.profile_cover_container{
position:relative;
width:981px;
height:400px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
border:1px solid #d8dbdf;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
margin-top:3px;
}
.cover_container {
width:981px;
height:400px;
float:left;
}
.cover_img {
float:left;
width:200px;
height:400px;
background-color:#000;
}
.p_img {
float:left;
width:198px;
height:198px;
margin:1px;
overflow: hidden;
}
.p_img img {
width: 100%;
}
.p_img img.height {
width: auto;
height:100%;
}
.cover_img_big {
float:left;
width:400px;
height:400px;
background-color:black;
}
.p_imb2 {
float:left;
width:400px;
height:400px;
margin:1px;
overflow: hidden;
}
.p_imb2 img {
width: 100%;
}
.p_imb2 img.height {
width: auto;
height:100%;
}
.cover_tree_img {
float:left;
width:381px;
height:400px;
background-color:black;
}
.tree_img {
float:left;
width:381px;
height:133px;
overflow:hidden;
}
You can add multiple classes to your selector like you would do it in css:
$('.p_img img, .p_img, .p_img2').each(function(){
...
});
You want to select multiple classes in one jQuery selector?
You can do this by using a comma to seperate them.
var divs = $(".p_img, .p_img2, .tree_img");
You can also use Attribute Selectors to add a bit of flexibility in your code
$('[class*="_img"]').each(function() { ... });
I have built a simple page that displays text and various formatted elements and also a photo gallery. The photo gallery has a horizontal scrollbar beneath a larger image. The scroll area contains thumbnails that are loaded into the larger image area after they are clicked on. This works fine in Chrome, Firefox, and Safari.
However, in Internet Explorer the JavaScript is blocked initially and the user must allow it to run. Prior to the JavaScript being allowed by the user the page is displayed in the background but the formatting for the photo gallery is incorrect because it relies upon the currently blocked JavaScript (the larger images that are currently hidden are displayed down the page and it looks bad). Is there a workaround where I do not display the webpage at all until after the JavaScript is unblocked or perhaps another easy solution?
<!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>
<title>index</title>
<style type="text/css">
body {
/*font-size:12px; modify this within each element*/
}
#wrapper {
width:950px;
height:800px;
margin-left:5px;
margin-top:5px;
border-top:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:5px solid #000000;
border-left:5px solid #000000;
padding:0px;
}
#topwrap {
width:950px;
height:50px;
}
#topturqsq {
float:left;
width:250px;
height:50px;
background-color:#7ECCC0;
}
#topartdeco{
float:left;
width:698px;
height:48px;
background-color:#FA8072;
padding:1px;
}
#aptname{
float:left;
width:248px;
height:149px;
border-bottom:1px solid #bbb;
vertical-align:top;
}
#contactbanner{
float:left;
width:690px;
height:29px;
border-bottom:1px solid #000000;
text-align:right;
font-size:20px;
padding-right: 10px;
padding-top:10px;
font-family:arial,helvetica,sans-serif;
}
#photogallery{
width:698px;
height:555px;
border-bottom:1px solid #bbb;
float:left;
}
#maintext{
font-size:15px;
font-family:arial,helvetica,sans-serif;
}
ul{
list-style-type:none;
margin:10;
padding:0;
vertical-align:top;
position:relative;
}
a{
display:block;
color:#000000;
text-decoration:none;
}
#leftnav{
position:relative;
width:248px;
height:600px;
font-size:20px;
float:left;
font-family:arial,helvetica,sans-serif;
}
#leftwrap{
position:relative;
float:left;
width:249px;
height:750px;
border-right: 1px solid black;
}
#linkDiv{
width:698px;
height:120px;
overflow:auto;
white-space:nowrap;
border: 1px solid black;
float:left;
padding-top:15px;
}
#divLinks{
float:left;
}
#container1,#container2,#container3,#container4,#container5,#container6,#container7,#container8{
width:500px;
height:375px;
margin:0 auto;
padding-left:95px;
padding-top:20px;
padding-bottom:20px;
}
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
document.getElementById('container'+idInfo).style.display = 'block';
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="topwrap">
<div id="topturqsq">
</div>
<div id="topartdeco">
<img src="images/artdeco.png" width="349" align="left"> <img src="images/artdeco.png" width="349" align="right">
</div>
</div>
<div id="leftwrap">
<div id="aptname">
<img style="position:relative; top:15px; left:0px;" src="images/banner.png" width="248" >
</div>
<div id="leftnav">
<ul>
<li>Home</li>
<li>Amenities</li>
<li>Nearby</li>
<li>Photos</li>
<li>Lease</li>
<li>Contact US</li> <br>
<li><span style="text-align:center;display:block;text-decoration:underline">Floor Plans </span></li>
<li>2 Bedroom</li>
<li>1 Bedroom</li>
<li>Corporate</li>
<li>Efficiency</li>
</ul>
</div>
</div>
<div id="contactbanner">
<img src="images/phone.png" height="20" > Call us: (555) 555 - 5555
</div>
<div id="photogallery">
<div id="divLinks">
<div id="container1"><img src="images/Chrysanthemum.jpg" width="500" height="375" border="1"></div>
<div id="container2"><img src="images/Desert.jpg" width="500" height="375" border="1"></div>
<div id="container3"><img src="images/Hydrangeas.jpg" width="500" height="375" border="1"></div>
<div id="container4"><img src="images/Jellyfish.jpg" width="500" height="375" border="1"></div>
<div id="container5"><img src="images/Koala.jpg" width="500" height="375" border="1"></div>
<div id="container6"><img src="images/Lighthouse.jpg" width="500" height="375" border="1"></div>
<div id="container7"><img src="images/Penguins.jpg" width="500" height="375" border="1"></div>
<div id="container8"><img src="images/Tulips.jpg" width="500" height="375" border="1"></div>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
<div id="linkDiv">
<img src="images/Chrysanthemum.jpg" width="120" height="90">
<img src="images/Desert.jpg" width="120" height="90">
<img src="images/Hydrangeas.jpg" width="120" height="90">
<img src="images/Jellyfish.jpg" width="120" height="90">
<img src="images/Koala.jpg" width="120" height="90">
<img src="images/Lighthouse.jpg" width="120" height="90">
<img src="images/Penguins.jpg" width="120" height="90">
<img src="images/Tulips.jpg" width="120" height="90">
</div>
</div>
<div id="maintext">
<strong>heading</strong>
<blockquote>bunch of text</blockquote>
</div>
</div>
</body>
</html>
I guess in theory you could * { display:none; } to hide everything, then bring it back when JS is accepted.. assuming that version of IE supports the wildcard (*) in CSS.
Update: Since you're doing this with the header.. I'm just going ot assume it has an ID of header..
<div id="header" style="display:none;">CONTENT</div>
<script type="text/javacript">
window.onload = function(){
var h = document.getElementById('header');
h.style.display = 'block';
}
</script>
Sorry but I am starting with this and I would need to add some code that the mouse movement follow these gif files, for it, Could anybody help me?
<html>
<head>
</head>
<body>
<img style="position:relative; TOP:400px; LEFT:600px; WIDTH:150px;
HEIGHT:120px; margin-right:-50px" border="0" src="trail6.gif">
<img style="position:relative; TOP:330px; LEFT:465px; WIDTH:70px;
HEIGHT:70px; margin-right:-50px" border="0" src="trail4.gif">
<img style="position:relative; TOP:340px; LEFT:600px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail2.gif">
<img style="position:relative; TOP:450px; LEFT:400px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail3.gif">
<img style="position:relative; TOP:450px; LEFT:550px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail5.gif">
</body>
</html>
Could anybody help me?
thanks in advance
Alejandro Castan
Use the MouseOver function of JavaScript.
Ready-to-use examples are to be found on the W3 site.
http://www.w3schools.com/jsref/event_onmouseover.asp