Viewing problem with html snippets and placing it somewhere free

problem with html snippets and placing it somewhere free



User: Gentlemens-agency 12 years ago
I have a problem when I'm using a html snippet code for a slideshow and when I'm trying to publish this.
The problem is that the picture of the slideshow is not aligned where I placed it in Easyweb. its just publishing it always in the middle of the site all over the other content.
The html code does work fine in iWeb.
User: Roddy 12 years ago
The code used in an iWeb HTML Snippet won't be much use in any other web design app due to the fact that iWeb doesn't use proper code injection.

Quite a few EasyWeb Beta testers are making the mistake of just blindly copying over Snippet code.

Can you post the code you are using and perhaps the URL to the iWeb created page?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Gentlemens-agency 12 years ago
This is the website in iWeb http://www.gentlemens-agency.com/home.html its the slideshow on the front page.

And this is the code below I use in iWeb

<!DOCTYPE html>
<html>

<head>
<meta charset='UTF-8'>

<title>Simple jQuery Slideshow</title>

<link rel='stylesheet' href='css/style.css'>

<style>
#slideshow {
margin: 0px auto;
position: relative;
width: 415px;
height: 277px;
padding: 0px;
box-shadow: 0 0 0px rgba(0,0,0,0.4);
}

#slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>
$(function() {

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1500)
.next()
.fadeIn(1500)
.end()
.appendTo('#slideshow');
}, 5000);

});
</script>
</head>

<body>

</div>

</div>

</div>
<div id="slideshow">
<div>
<img src="http://imageshack.us/a/img17/86/mg6277x760x507.jpg">
</div>

<div>
<img src="http://imageshack.us/a/img51/4415/606tk.jpg
">
</div>

<div>
<img src="http://imageshack.us/a/img541/3606/lance1e.jpg

">



</html>
User: Roddy 12 years ago
One of the problems with the iWeb HTML Snippet is that it didn't insert the code into the page code but created a separate page. Your code is a complete HTML doc and you can't paste it into another HTML doc!

It also has a number of syntax errors which I have corrected - I hope!

Paste this code into the Head Code box in the page inspector...

<style type="text/css">
#slideshow {
margin: 0;
position: relative;
width: 415px;
height: 277px;
padding: 0px;
}

#slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>


Paste this into the Footer Code box in the Page inspector...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
$(function() {

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1500)
.next()
.fadeIn(1500)
.end()
.appendTo('#slideshow');
}, 5000);

});
</script>


Now drag an HTML Snippet onto the page, paste in the code below and click "Apply"...

<div id="slideshow">
<div>
<img src="http://imageshack.us/a/img17/86/mg6277x760x507.jpg" alt="" />
</div>
<div>
<img src="http://imageshack.us/a/img51/4415/606tk.jpg" alt="" />
</div>
<div>
<img src="http://imageshack.us/a/img541/3606/lance1e.jpg" alt="" />
</div>
</div>


Using the metrics inspector, adjust the Snippet size to 415px wide by 277px high and then drag it into position on the page.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Gentlemens-agency 12 years ago
Great it works!
Thank you <!-- s:mrgreen: --><img src="{SMILIES_PATH}/icon_mrgreen.gif" alt=":mrgreen:" title="Mr. Green" /><!-- s:mrgreen: -->


Post Reply
You must login or signup to post.