Topic: Rule of Thumb for Pages?

[Grammy]

Is there a general rule of thumb for designing pages (not blocks)?  By that, I'm speaking of HTML; when incorporating CSS, how much (tag-wise) is superfluous, what is really needed? 

For instance, if I want a background image on my page and have need of CSS, is it better to omit the head tags and try to put the CSS inline (inside the body tag) or, is it better to opt for internal CSS and, if so, does this require the head tags?  I'm just not quite sure how much of the page structure SimplePortal handles for the user (tag-wise).

I'm not having any success getting anything to show up and, rather than come here and ask you guys to "fix it", I thought I'd just ask what tags are essential when creating a page that has need of expressing background images, margins, etc.  While I'm asking, I may as well also ask if any special consideration is made for Javascript? 

I'm good building web pages "old school" but SimplePortal presents a bit of a challenge for me.   

Thanks!

[emanuele]

hmm... I'm not sure we are talking the same language.
Could you give some actual examples of code you'd like to use and where (exactly)?

[Grammy]

hmm... I'm not sure we are talking the same language.
Could you give some actual examples of code you'd like to use and where (exactly)?

Basically, I was just asking if SimplePortal (this site) provided any sort of basic coding advice for creating pages.  Normally, I'd just code old-school, and call for whatever Javascript or CSS help I need from within the header tags but it seems to me that SimplePortal seems to have some sort of internal layout (for pages, anyway) that eliminates the need for doctype, head, title and, at times, even the body tag.  Am I wrong about that? 

Since I posted the question, I put my Javascript and CSS directly into the page creation field and, skipping body tags, simply used div tags.  Everything is now showing up just fine, except my Javascript isn't firing.  (Attached screenshot).

When you click "Pull me", that rope is supposed to go down and the curtain is supposed to draw.  It works beautifully on a regular web page but it's not functioning within SimplePortal.  That's why I asked if there are any special considerations for Javascript when using SimplePortal to create a page.

But really, emanuele, the reason for this thread was just to find out how SimplePortal treats tags in basic page structure.  I guess I hoped there might be a tutorial of sorts posted somewhere on the site.  I've just not been able to find it.   

I'm okay trying to figure it out, though.  Sooner or later, I'll get that Javascript to fire, if I have to hit it with a hammer! 


Code just in case you see something obvious but no worries if you don't.  (I can tell you that clicking the rope causes a hash (#) to be added to the end of my url:  /index.php?page=page2224#  if that tells you anything).  As I said, it works on my regular (non-forum) web site.   I'm Googling like crazy. 

Code: [Select]

<script type="text/javascript">
function SimpleSwap(el,which) {
  el.src=el.getAttribute(which || "origsrc");
}

function SimpleSwapSetup() {
  var x = document.getElementsByTagName("img");
  for (var i=0;i<x.length;i++){
    var oversrc = x[i].getAttribute("oversrc");
    if (!oversrc) continue;
     
    // preload image -
    // comment the next two lines to disable image pre-loading
    x[i].oversrc_img = new Image();
    x[i].oversrc_img.src=oversrc;

    // set event handlers
    x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
    x[i].onmouseout = new Function("SimpleSwap(this);");

    // save original src
    x[i].setAttribute("origsrc",x[i].src);
  }
}

var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}</script>

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

$curtainopen = false;

$(".rope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
$curtainopen = false;
}
return false;
});

});
</script>
<style>
.container{
position: relative;
background: #4f3722 url('http://mydomain.com/theater/images/darkcurtain.jpg') repeat-x;
width: 1186px;
min-height: 820px;
max-height: 820px;
margin-left: -10px;
margin-top: 3px;
margin-right: 0px;
padding:0px;
}

    img{
border: none;
}
    .leftcurtain{
width: 50%;
height: 495px;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 495px;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 0px;
}
.rope{
position: absolute;
top: 4px;
left: 70%;
z-index: 4;
}
.Ereturn{
position: absolute;
top: 480px;
left: 20px;
}
*:-moz-any-link:focus {
outline-width: 0 !important;
}</style>

<div class="container"><div class="leftcurtain"><img src="http://mydomain.com/theater/images/frontcurtain.jpg"/></div>
<div class="rightcurtain"><img src="http://mydomain.com/theater/images/frontcurtain.jpg"/></div>
<img class="logo" src="http://mydomain.com/theater/images/buildinter.png"/>
<a class="rope" href="#">
<img src="http://mydomain.com/theater/images/rope.png"/>
</a></div>
(My actual domain replaces "mydomain.com".)

[emanuele]

Okay, now I have a better overview of what you are doing and I can give you a couple of suggestions.

First, use the <style> tag in the <body> is not "really" correct.
It is mostly accepted by browsers, but technically is wrong (actually with HTML5 you could use the "scoped" parameter to mix it in html, but is basically not supported by browser).
But then again I've never seen a browser complain about using <style> in the middle of a page. So it's basically fine, mine is just a note.

Second:

Code: [Select]

var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}</script>this is bound to give problems with SMF.
TL;DR use:

Code: [Select]

addLoadEvent(SimpleSwapSetup);</script>
long explanation, SMF uses window.onload to attach load events, but it uses the addLoadEvent function to allow to add multiple functions at load time. I feel (TBH I'm not sure) that having these two ways (addLoadEvent and the two lines I copied above) will somehow conflict at some point.
But I'm not sure, so I may be wrong and everything will be fine. lol

Finally, if the one you posted is the only code you posted, I feel like you missed to load jQuery, and this is the reason the code doesn't work.
Depending on where you picked the code, it may require one version of jQuery or another, so it's not entirely safe to twll you to add at the beginning of the block something like:

Code: [Select]

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>but it could work.
If, instead, you already have jQuery loaded... then it may be something else entirely. lol

[Grammy]

Thanks so much, emanuele, for the "fresh eyes"  (I absolutely DID forget to call for my Jquery!) and for the heads up about the style tags and that problematic bit of script.  I've never left this site without my issues being resolved and it's the same, now.  I "pull" the rope and the curtains open!  (We're going to show movies on that page, if I don't run into embed issues.)  I'll Google that bridge when I get to it, ha!   

Thanks again! 

[Grammy]

Just stopping back by to let you know that not only do the curtains open when pulling the rope, but now, there is a movie on the screen and the users can sit back and watch.  This is great!  I'm starting to get the hang of this SimplePortal thing!   

Thanks again, huge help!