The Glade 4.0
https://gladerebooted.net/

HTML/CSS Part II
https://gladerebooted.net/viewtopic.php?f=5&t=10450		 Page 1 of 1
Author:  NephyrS [ Tue Oct 01, 2013 12:52 pm ]
Post subject:  HTML/CSS Part II
OK, so I've spent the last couple of years on and off administering several websites for our school. Fairly light stuff, and I had a halfway-decent page to start with.

Now I'm setting one up for a consulting business, as well as a personal page for my CV, etc. And I'm sure I will have many more questions that I can ask here.

I've got the domain registered, using Reclaim Hosting atm.

Want to just set up my pages from scratch, so I learn it from the ground up.

First question:

I've got a nice bit of hide/unhide javascript I've been using to switching something from a hidden to unhidden class on a link click.

The hidden and unhidden classes are in the central stylesheet.

Is there anyway to have script that loads for all pages? Or do I need to put the script in the header of each individual page?
Author:  Lenas [ Tue Oct 01, 2013 1:01 pm ]
Post subject:  Re: HTML/CSS Part II
Much in the same way you use the <link> tag to load a single stylesheet on all of your pages, the solution to your issue would be to use one single header file at the top of all pages, but that is going to require some PHP.

Put all of your header code into a file (from doctype usually down to the opening body tag), call it header.php - then, at the top of each page, use this:

Code:
<?php include('path_to/header.php'); ?>


and then any edits you make to header.php will be reflected on all pages that have the include. You can use this same technique with all recurring elements - navigation, sidebar, footer, etc. Please note - all pages executing PHP code need to have a .php extension, so you're gonna have to modify all of your pages most likely.

Example:
Spoiler:
Code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

Code:
<?php include('header.php'); ?>
  <body>
    <!-- page content -->
  </body>
</html>
Author:  NephyrS [ Tue Oct 01, 2013 1:07 pm ]
Post subject: 
Hmm, ok. Can do it for the whole header. But what about parts of it? Ie, if I have different page titles, etc. in each pages header, but just want to load the java?

Not a big deal to paste it into each header.
Author:  Lenas [ Tue Oct 01, 2013 1:10 pm ]
Post subject:  Re: HTML/CSS Part II
Well instead of the entire header you could create an include only for your css and script files. Then just use something like this:

Code:
<!DOCTYPE html>
   <html>
   <head>
      <title>Page Title</title>
      <?php include('my_scripts.php'); ?>
   </head>
   <body>
      <!-- content -->
   </body>
</html>


and my_scripts.php:
Code:
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>


Basically any reused / frequently edited code can be turned into a PHP include if you want. Best applications are probably headers, footers and navigation.

Edit - and since you're talking about using javascript, is it something you wrote yourself or are you using a framework? If it's the former, maybe look into jQuery (leading js framework): http://try.jquery.com/
Author:  NephyrS [ Tue Oct 01, 2013 2:37 pm ]
Post subject: 
It's a modification of something I saw somewhere- may have been here.
Author:  NephyrS [ Wed Oct 02, 2013 4:01 pm ]
Post subject: 
OK, so question:

I would like to set up a page with two columns, 1 static and 1 dynamic. Static column would have a listing of events, dynamic column would display picture/information of said events.

Would using:

Code:
<script type="text/javascript">
    function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
    }
    </script>


toggling between states

Code:
.hidden { display: none; }
.unhidden { display: block; }


With the link

Code:
<a href="javascript:unhide('PHDAbstract');">Summary of Current Work</a></p>


in one column, directing to a div inside the second column (in this case, PHDAbstract) work?

It seems like it should, but I thought I'd see if anyone else had a better idea.

This would be a much cleaner way of displaying the data than any other I can think of off the top of my head, and the display:none characteristic keeps the content from taking any space on the page in the absence of a toggled command.

Also, would there be a way to get the toggling of one content div to also have the opposite effect on the others? So only one could be "open" at a time? Could, in other words, string them together like this:

Code:
<a href="javascript:unhide('PHDAbstract');javascript:hide('BSAbstract');">Summary of Current Work</a></p>
Author:  Lenas [ Wed Oct 02, 2013 4:06 pm ]
Post subject:  Re: HTML/CSS Part II
I would load jQuery and use the built-in toggle function:

Code:
$(".toggle").click(function(){
  $("#PHDAbstract").toggle();
});

<button class="toggle" type="button">Button Text</button>

<div id="PHDToggle">Content</div>


http://www.w3schools.com/jquery/jquery_hide_show.asp
Author:  NephyrS [ Wed Oct 02, 2013 4:16 pm ]
Post subject: 
So, stupid question...

How exactly do I load JQuery?
Author:  Lenas [ Wed Oct 02, 2013 4:20 pm ]
Post subject:  Re: HTML/CSS Part II
Put this in your document, either before </head> or </body>. Remove your old script so there's no conflicts.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Author:  NephyrS [ Wed Oct 02, 2013 4:34 pm ]
Post subject: 
Oh, ok. Thought this was something I'd have to load onto the server.

Thanks!

Just to ask about the script-

The first part goes in the header, right? But it defines a specific div(PHDAbstract). Would I need to duplicate that for each of the items on the page? The layout I'm envisioning will have a lot of items with individual div names (pet event).

The button is then a general toggle, which as I read it will swap all hidden to unhidden, and visa versa.
Author:  Lenas [ Wed Oct 02, 2013 4:43 pm ]
Post subject:  Re: HTML/CSS Part II
The .toggle function can be tied to anything. The first part, $(".toggle") is the trigger and can be set to any tag, ID or class. In my example, it is targetting the button which has a class of .toggle.

The second part, $("#PHDAbstract") is the target, and can also be any tag, ID or class. In my example, it is targeting a div with an ID of #PHDAbstract.

You can have as many triggers and targets as you want, and yes, the script part goes in your header or footer, as long as you call it after you call the jQuery script itself.

Code:
$("#first-toggle").click(function(){ $("#first-div").toggle(); });
$("#second-toggle").click(function(){ $("#second-div").toggle(); });
...


and so on.

Each one of these commands is called an Event Handler. It watches the first element to be clicked, and then runs a function targeting a second element when that happens.
Author:  NephyrS [ Wed Oct 02, 2013 6:36 pm ]
Post subject: 
Ok, cool. That's the way I was reading it, but wanted to be sure.

Thanks!
Author:  NephyrS [ Wed Oct 02, 2013 7:32 pm ]
Post subject:  Re: HTML/CSS Part II
Ok, so I can't figure out why what I'm doing isn't working:

Code:
<script>$(document).ready(function(){$("#xavierreu-toggle").click(function(){$("#xavierreu").toggle();});})</script>


And then for the trigger:

Code:
<li><a class="xavierreu-toggle">Xavier University Chemistry REU Program Lab Tours</a</li>


And the target:

Code:
<div id="xavierreu">
   <p>Summer 2012 and Summer 2013: Lab Tours & Graduate School Q&A for NSF REU Students at Xavier University, NO</p>
</div>


And nothing happens when I click.
Author:  Kairtane [ Wed Oct 02, 2013 7:51 pm ]
Post subject:  Re: HTML/CSS Part II
NephyrS wrote:
Ok, so I can't figure out why what I'm doing isn't working:

And then for the trigger:

Code:
<li><a class="xavierreu-toggle">Xavier University Chemistry REU Program Lab Tours</a</li>




You're missing a > after </a

Code:
<li><a class="xavierreu-toggle">Xavier University Chemistry REU Program Lab Tours</a></li>
Author:  NephyrS [ Wed Oct 02, 2013 11:03 pm ]
Post subject: 
Haha, of course.
Author:  NephyrS [ Thu Oct 03, 2013 12:40 pm ]
Post subject:  Re: HTML/CSS Part II
Ok, got it working. Had caught the </a after I posted, but had used class instead of id for one of the divs.

So next question: With this code, the text appears visible by default. Is there a way to make it appear hidden by default?

IE, how do I set the initial state of the toggle function?

Also, it seems that with this method, it only toggles the visibility of the indicated item. Clicking on the next toggle link does not hide the other previously toggled links, since each is referred to by id.

It seems like what I need is a "hide all" command that sets all visible divs to hidden, and then have a script that hides all, and then makes visible one new div.
Author:  Screeling [ Thu Oct 03, 2013 12:59 pm ]
Post subject: 
Well, you can set another class on all those elements for that purpose. Then just $('.nephs-class').hide() or show(); to get them to go away/show up.
Author:  Lenas [ Thu Oct 03, 2013 3:22 pm ]
Post subject:  Re: HTML/CSS Part II
When you click on something, you can add a class of "visible"

Code:
$("#first-toggle").click(function(){
    $("#first-div").addClass('visible').toggle();
});


Then you can have a hide button that when clicked will search your entire document for all elements with that class, remove said class, and hide them.

Code:
<button class="hide-all" type="button">Hide all this crap</button>

$('.hide-all').on("click", function() {
  $(document).find('.visible').removeClass('visible').hide();
};


Just an idea.

Wanting to have them all hidden on load isn't too hard but we're getting a little bit of scope creep now and it might be smarter to start over :P I'd need to see your HTML to give a more informed idea. Ideally you could just scan the document after it's loaded and hide elements based on a CSS selector:

Code:
$(document).ready(function(){
  $(document).find("div.content").hide();
})
Author:  NephyrS [ Fri Oct 04, 2013 11:56 am ]
Post subject: 
Yeah, I'm using this as a chance to play around with things that I really haven't before, and some definitely over my head.

I'll PM you the link to my site.
Page 1 of 1 All times are UTC - 6 hours [ DST ]
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/