collapse collapse

* User Info

 
 
Welcome, Guest. Please login or register.
Did you miss your activation email?

* Who's Online

  • Dot Guests: 105
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM
  • phantomm: and from what I see only patch is broken, full install package is fine
    October 21, 2016, 03:44:44 PM
  • phantomm: they say it for over 3 weeks now..
    October 21, 2016, 03:43:52 PM
  • aegersz: SMF say that bug fix 2.0.13 is coming soon ...
    October 19, 2016, 06:46:12 PM
Welcome to SimplePortal.net! You can download SimplePortal from the Downloads Area!

Author Topic: Rule of Thumb for Pages?  (Read 7367 times)

0 Members and 1 Guest are viewing this topic.

Offline Grammy

  • Semi Newbie
  • *
  • Posts: 15
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
Rule of Thumb for Pages?
« on: June 14, 2016, 10:06:02 PM »
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!
« Last Edit: June 15, 2016, 10:28:53 PM by Grammy »

Offline emanuele

  • Developer
  • *
  • Posts: 293
Re: Rule of Thumb for Pages?
« Reply #1 on: June 15, 2016, 08:33:54 AM »
hmm... I'm not sure we are talking the same language. :P
Could you give some actual examples of code you'd like to use and where (exactly)?

Offline Grammy

  • Semi Newbie
  • *
  • Posts: 15
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
Re: Rule of Thumb for Pages?
« Reply #2 on: June 15, 2016, 01:10:49 PM »
hmm... I'm not sure we are talking the same language. :P
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".)
« Last Edit: June 15, 2016, 01:44:52 PM by Grammy »

Offline emanuele

  • Developer
  • *
  • Posts: 293
Re: Rule of Thumb for Pages?
« Reply #3 on: June 15, 2016, 03:48:03 PM »
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

Offline Grammy

  • Semi Newbie
  • *
  • Posts: 15
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
Re: Rule of Thumb for Pages?
« Reply #4 on: June 15, 2016, 04:05:07 PM »
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!   :D

Thanks again! 
« Last Edit: June 15, 2016, 04:14:20 PM by Grammy »

Offline Grammy

  • Semi Newbie
  • *
  • Posts: 15
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
Re: Rule of Thumb for Pages?
« Reply #5 on: June 15, 2016, 10:28:27 PM »
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!   :applause:

Thanks again, huge help!