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>
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:
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
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.
When I use below code block for testing,
I write my original HTML which starts with <xsl:key name="Name" match="/NewSet/ps1/Name/text()" use="." /> into first box, I get the result from third box which is names "HTML Mode of the IFRAME" like <xsl:key name="Name" match="/NewSet/ps1/Name/text()" use="." ></xsl:key>
Result is with out / tag, how can I prevent this problem.
I think this is about text engine of browsers? Isn't it?
<html>
<head>
<title>Editable IFRAME test</title>
</head>
<body onload="SetEditable()">
<b>Set your original HTML content here:</b><br />
<textarea id="htmlArea" style="width: 783px; height: 189px"></textarea>
<br />
<input type="button" onclick="CreateHtml();return false;" value="Set Content in the IFRAME">
<br />
<b>Editable IFRAME element:</b>
<br />
<div style="width: 800px; height: 600px; border: 1px solid red;">
<iframe style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 100%;
padding-right: 0px; height: 100%; padding-top: 0px" frameborder="0" src="javascript:void(0)"
id="editor"></iframe>
</div>
<input type="button" onclick="ShowIFRAMEHTML();return false;" value="Show IFRAME HTML">
<br />
<b>HTML Mode of the IFRAME:</b>
<br />
<textarea id="htmlMode" style="width: 783px; height: 313px"></textarea>
<script type="text/javascript">
var editor1 = document.getElementById("editor"); //reference to the IFRAME element
var htmlArea1 = document.getElementById("htmlArea"); //reference to the HTML area in which we put the content
var htmlMode = document.getElementById("htmlMode"); //reference to the HTML area that displays the IFRAME content
var oDocument = editor1.contentWindow.document;
var sMarkup = "<html><head><title>New Document</title></head>" +
"<body contenteditable=true style='overflow:scroll;margin:0px;padding:0px;height:100%'>" +
" </body></html>";
function SetEditable() {
oDocument.open();
oDocument.write(sMarkup);
oDocument.close();
oDocument["designMode"] = "on";
oDocument.execCommand("2D-Position", false, true);
}
function CreateHtml() {
oDocument.body.innerHTML = htmlArea1.value;
htmlMode.value = oDocument.body.innerHTML;
}
function ShowIFRAMEHTML() {
alert(oDocument.body.innerHTML);
}
</script>
</body>
</html>
No, it's about how the value for innerHTML is created.
You put the HTML code in the iframe, which causes it to parse it into elements. Then you get those elements as HTML, which will create new HTML code from the elemtns, not return the original string that was used to create the elements.
If you test this in different browsers, you will see that you get different results. Some browsers may for example capitalise the tag names, rearrange the attributes, or even transform the elements to some valid HTML element or surround it with HTML elements to make it a valid document.
If you want the result as a self closing tag, you need to put an XHTML document (or perhaps an HTML5 document) in the iframe, otherwise it will be returned as HTML, which doesn't have any self closing tags.