Good day to all. I am new and novice and its my first question to this forum. I would try my level best to maintain dignity of this community and forum.
I just started to learn web development with html, css and java script. I was trying to make a slide show of images with "div" and backgroup-images. after lots of effort it worked but not smooth.
Images not appears one by one serial but skip randomly. Speed of slides are not uniform and after few seconds it goes very fast.
I was using "setInterval" in my codes.
<!-- scroll.html -->
<!DOCTYPE html>
<html>
<<head>
<meta charset="UTF-8">
<meta name= "index.html" content="html self made web site ">
<meta name= "keywords" content="web design, affordable and professional">
<meta name="description" content="Affordable and smart web desing without any builders rather via self made codes">
<meta name="Author" content="Binod Binani">
<meta name="viewport" content="width=device-width,initial-scale=0">
<!--Css link -->
<!--<link rel="stylesheet" type="text/css" href="../HTML-WEB/sc-css/sc_style1.css">
<script type="text/javascript" src="../html-web/java-js/slides.js" ></script> -->
<title>#Sharp Compusoft scroll#</title>
<style>
#Myimg{
}
#divBox{
min-height: 425px;
border: 2px black solid;
float: right ;width: 48%;
background-image: url("../html-web/sharp-slides/05.bmp");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: auto;
}
#divSlides{
background-image: url("../HTML-WEB/img/it-slide01.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 425px;
border: 2px blue solid;float:
left; width: 50%;
}
</style>
</head>
<body onload="showImages()">
<section id='Middle' style="max-height: 430px;margin-top: 100px; border: 8px yellow solid; position: relative;">
<div id="divMiddle" style="min-height:425px; border: 5px red solid; margin: auto;">
<div id="divSlides" >
<!--50% left for fix image"> -->
</div>
<div id='divBox'>
<!--50% right for sliding image. Images are from 1 to 12 slides"> -->
<h4 id='head4'>1/12</h4>
</div>
</div>
</section>
<script>
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'
showImages();
function showImages(){
var ImageSource=""
if (imageNo > 12) {
imageNo=1 ;
}
if (imageNo< 10){
ImageSource= filepath +"0" +imageNo + extension ;
} else{
ImageSource= filepath +imageNo + extension
}
head4.innerHTML = imageNo+'/12'
document.getElementById('divBox').style.backgroundImage = ImageSource;
imageNo++; //increment by 1 step
setTimeout(showImages,5000);
} // showImages
</script> -->
</body>
</html>
There a couple of things causing the issue you are describing
First, you are calling showImages() three times, all they are all running at the same time, causing the timeouts to overlap and the image to jump out of order.
You should remove this function call <body onload="showImages()">
And this one too setTimeout(showImages,5000);
Then use setInterval, instead of setTimeout, the difference is that the interval keeps running every given time, instead of running just once like the timeout.
Here change showImages(); to var slidesInteval = setInterval(showImages,5000);
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'
var slidesInteval = setInterval(showImages,5000);
That way you function will be running only once every 5 seconds, you need to store the interval in a variable in case you want to clear it later.
You can check the full fiddle here https://jsfiddle.net/zgranda/5gnfr7hv/8/ . I used lorem picsum for the images, so don't copy the images urls
Related
I am currently trying to convert HTML to PDF using itext7 and itext7.pdfhtml but have a small problem.
I have a fixed footer (.footer) which works well when opened with a browser but when converted using below code, the div is not fixed to the bottom of the page. The div sits just after the other div content before it.
C# .net core code
string fullBody = System.IO.File.ReadAllText("index.html");
var stream = new MemoryStream();
var writer = new iText.Kernel.Pdf.PdfWriter(stream);
writer.SetCloseStream(false);
iText.Html2pdf.HtmlConverter.ConvertToPdf(fullBody , writer);
writer.Close();
stream.Seek(0, SeekOrigin.Begin);
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">
<img src="header1.bmp" width="100%" />
<img src="header2.bmp" width="100%"/>
</div>
...
<div class="footer">
Fixed footer
</div>
</body>
</html>
CSS
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
Have tried several other examples but it still won't stay at the bottom.
Even this similar question Similar question doesnt work
Any help would be greatly appreciated.
In PDF
In browser (print view)
Just a small note - this pdf will only have 1 page so a hard coded solution might be considered.
The footers belong to the page margin area. #page media is the right way to configure it. CSS running element functionality can be used to put the element into the desired location and exclude it from the rest of the layout. Major tools converting HTML into page-based representation support it.
Here is a sample HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#footer {
position: running(footer);
}
#page {
#bottom-center {
content: element(footer);
}
}
</style>
</head>
<body>
<p>Hello world</p>
<div id="footer">I am a footer</div>
</body>
</html>
Result looks like this:
I am embedding base64 images in my web page projects and I want to keep it all organized but the base64 takes up large sections of the markup making it hard to read and debug.
Is there a way to separate base64 strings to another location on the page?
<html>
<head>
</head>
<body>
<!-- markup here -->
<!-- markup here -->
<!-- markup here -->
</body>
</html>
Is there a way to organize the base64 string all together at the beginning of the body tag or at the end?
Update
There are examples of moving the image data to CSS as a background image and then assigning the class. That might work for some cases but not for cases where an image behavior is expected.
If you are using CSS and want to keep the code organised you can place the data image url in css and call it using div in the body. check the example code
<!DOCTYPE html>
<html>
<head>
<style>
#someclass {
/* single gray pixel - repeated */
background-image:
url('data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
background-repeat: repeat;
background-position: left top;
position: absolute;
left: 30px;
top: 68px;
}
</style>
</head>
<body>
<div id="someclass">sssssss....</div>
</body>
</html>
I know the very basics of HTML and am trying to post an image slideshow on my ebay listings. I have tried the following in order to get Jssor to function:
Downloaded slider-19.0.1 from Jssor slider GitHub.
Tried following the ebay/blog post guide on jssor's website several times with both photobucket and imgur. The final result, as displayed on my ebay listing, was either a display of raw code or one static image that did not slide anywhere. Yes, I did compress it with the Jssor.Compress.exe tool successfully.I have installed and reinstalled the tool via the GitHub.
I have also tried downloading the example source files from the GitHub, from the "examples-no-jQuery" folder as instructed. Yes, I did insert my own links from imgur. Namely, vertical-slider.source.html, and simple-slider.source.html. When compressed, they both appeared as a long string of code in the description of my ebay auction. Yes, I used the HTML editor on ebay, not the plain text description box. However, when directly opened with my web browser (Firefox) the first image was actually displayed (!), But it never slid anywhere and none of the other images were displayed.
I am probably missing one critical step somewhere and I would appreciate it if you could point me in the right direction. Below are the compressed versions, originating from the source examples directly from your website, with my photo links patched in, run with the most recent compressor tool, and they don't work for me They are definitely compressed because they are about 50% shorter than the source files:
The vertical example, from here on the jssor github: (before compression >100 lines)
/*Jssor*/
.jssora08l,
.jssora08r {
display: block;
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
background: url(../img/a08.png) no-repeat;
overflow: hidden;
opacity: .4;
filter: alpha(opacity=40)
}
.jssora08l {
background-position: -5px -35px
}
.jssora08r {
background-position: -65px -35px
}
.jssora08l:hover {
background-position: -5px -35px;
opacity: .8;
filter: alpha(opacity=80)
}
.jssora08r:hover {
background-position: -65px -35px;
opacity: .8;
filter: alpha(opacity=80)
}
.jssora08l.jssora08ldn {
background-position: -5px -35px;
opacity: .3;
filter: alpha(opacity=30)
}
.jssora08r.jssora08rdn {
background-position: -65px -35px;
opacity: .3;
filter: alpha(opacity=30)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Slider - Jssor Slider, Carousel, Slideshow</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function(containerId) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 2, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
<div u="loading" style="position:absolute;top:0px;left:0px;">
<div style="filter:alpha(opacity=70);opacity:0.7;position:absolute;display:block;background-color:#000000;top:0px;left:0px;width:100%;height:100%;">
</div>
<div style="position:absolute;display:block;background:url(../img/loading.gif) no-repeat center center;top:0px;left:0px;width:100%;height:100%;">
</div>
</div>
<div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:600px;height:300px;overflow:hidden;">
<div><img u="image" src="http://i.imgur.com/FM6Tcksl.jpg"></div>
<div><img u="image" src="http://i.imgur.com/Ni4NO8ol.jpg"></div>
<div><img u="image" src="http://i.imgur.com/JMBy1VVl.jpg"></div>
<div><img u="image" src="http://i.imgur.com/FWXXCV5l.jpg"></div>
<div><img u="image" src="http://i.imgur.com/YfblQEJl.jpg"></div>
</div>
<span u="arrowleft" class="jssora08l" style="top:8px;left:8px;">
</span>
<span u="arrowright" class="jssora08r" style="bottom:8px;left:8px;">
</span>
<a style="display:none" href="http://www.jssor.com">Image Slider</a>
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
</body>
</html>
The "simple slider" example from here on the jssor website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Slider Example - Jssor Slider, Carousel, Slideshow</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function(containerId) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$DragOrientation: 1 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
<div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:600px;height:300px;overflow:hidden;">
<div><img u="image" src="http://i.imgur.com/FM6Tcksl.jpg"></div>
<div><img u="image" src="http://i.imgur.com/Ni4NO8ol.jpg"></div>
<div><img u="image" src="http://i.imgur.com/JMBy1VVl.jpg"></div>
<div><img u="image" src="http://i.imgur.com/FWXXCV5l.jpg"></div>
<div><img u="image" src="http://i.imgur.com/YfblQEJl.jpg"></div>
</div>
<a style="display:none" href="http://www.jssor.com">Image Slider</a>
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
</body>
</html>
All editing was done with vim. I am probably missing something really simple, but I don't understand how it isn't working because I followed the guides to a T and then used example sources off of the website. I feel like I have eliminated anything that could be a source of error.
Please run vertical-slider.compress.bat, you will get vertical-slider.html.
Open it, the code between <body></body> is what you need.
In addition, with jssor slider maker you can generate code by one click, see export slider code.
Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</img>
</a>
however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.
Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.
However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?
Here is a website that uses this method -
http://www.equisgarcia.com
There are multiple approaches to this issue, depending always on your needs.
I made a fiddle using only CSS with one of the approaches, you can see it working here.
All you you need is:
1) Define a parent element "parentExample" containing the image and the text with a size.
2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default.
3) Define a hover "parentExample:hover" in which image is hidden and text display.
.parentExample {
height: 400px;
width: 400px;
}
.imageExample {
height: 100%;
width: 100%;
}
.textExample {
height: 100%;
width: 100%;
display: none;
}
.parentExample:hover .imageExample {
display: hidden;
}
.parentExample:hover .textExample {
display: block;
}
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
This is how the first figure image on the site is done in HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="pr_contain_item_7129129">
<a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
"equisgarcia" onfocus="this.blur()" onmouseout=
"this.className='nohover';" onmouseover="this.className='hover';" rel=
"history"></a>
<div class="loader_holder" id="load_7129129"><img src=
"/_gfx/loadingAnim.gif"></div>
<div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
data-hi-res=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
height="169" src=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
width="300"></div>
<div class="thumb_title">
<span class="text">New Year's Card</span>
</div>
<div class="excerpt">
Fig.ω
</div>
<div class="thumb_tag">
<span class="text"><a href=
"http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
<a href=
"http://www.equisgarcia.com/filter/Print">Print</a> </span>
</div>
</div>
</body>
</html>
you can simply do this with javascript and html and also with css and as follows:
<html>
<style type="text/css">
#sam{
height: 100px;
width: 100px;
background-color:#ccc;
}
#sam:hover{
background-color: #eee;
}
</style>
<head>
<script type="text/javascript">
var change = function(){
var x = document.getElementById("sam");
x.innerHTML = "this is new";
}
var changeanother = function(){
var x = document.getElementById("sam");
x.innerHTML = " ";
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>
futrher using innerHTML helpes you to gave more controls over your tag.
you can also use img tage insted of a div tag.
as you wish
You an use sprites; in CSS using background-position-x, -y properties.
<div class="image"></div>
CSS:
div.class {
background-image: url('../img/image.jpg');
}
div.class:hover {
background-x: -100px;
}
Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100px to show the other image.
I Develop a marquee which continuously moves to upward direction.
But what the exact problem is after finishing scrolling last image there is a huge gap between first image and last image. I just want to remove the trailing space which additionally add to the bottom of the last image. Is anybody help me to figure out the solution. Thanks in advance.
HTML :
<div style="margin-left:760px;border:0px;height:300px; width:265px;">
<marquee bgcolor="transparent" scrollamount="8" direction="up" width="265px;" style="float:left; position:absolute;" loop="true" height="300px" onmouseover="this.stop()" onmouseout="this.start()">
<img src="http://s30.postimg.org/bab6pd5wd/i05.jpg" width="220" style="z-index:11;" />
<br>
<img src="http://s30.postimg.org/84qkz5na5/i06.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/nxvjfma71/i07.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/lf9uexogt/i08.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/g6eth261p/i09.jpg" width="220" />
<br>
<img src="http://s30.postimg.org/wvg9cz2n1/i10.jpg" width="220" />
<br>
</marquee>
</div>
What i did is just here : http://jsfiddle.net/vivekbhintade/xuwN2/13/
Remove the last <br> from your marquee should do it, plus check your css and make sure that there is no margin added to images there.
As others have pointed out, using the <marquee> tag is really bad practice nowadays. There are lots of very nice jquery marquee plugins if you have a look around.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
overflow: hidden;
background-color: white;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
var zxcMarquee={
init:function(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone;
p.style.overflow='hidden';
obj.style.position='absolute';
obj.style[mde[0]]='0px';
obj.style[mde[3]]=sz+'px';
clone=obj.cloneNode(true);
clone.style[mde[0]]=sz+'px';
clone.style[mde[2]]='0px';
obj.appendChild(clone);
o=this['zxc'+id]={
obj:obj,
mde:mde[0],
sz:sz
}
if (typeof(srt)=='number'){
o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
}
else {
this.scroll(id,0)
}
},
scroll:function(id,ud){
var oop=this,o=this['zxc'+id],p;
if (o){
ud=typeof(ud)=='number'?ud:0;
clearTimeout(o.dly);
p=parseInt(o.obj.style[o.mde])+ud;
if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
p+=o.sz*(ud>0?-1:1);
}
o.obj.style[o.mde]=p+'px';
o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
}
}
}
function init(){
zxcMarquee.init({
ID:'marquee1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
zxcMarquee.init({
ID:'marquee2', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
}
if (window.addEventListener)
window.addEventListener("load", init, false)
else if (window.attachEvent)
window.attachEvent("onload", init)
else if (document.getElementById)
window.onload=init
</script></head>
<body>
<div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
sub category
to better organize its scripts.</p>
<p><b>Gradient Image Maker</b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b>DD Help Forum</b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
<div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
sub category
to better organize its scripts.</p>
<p><b>Gradient Image Maker</b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b>DD Help Forum</b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
</body>
</html>