1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Read-Only Page Problem. Not Browser Interactive

Discussion in 'HTML & Website Design' started by TBlue, May 19, 2019.

0
  1. #1
    Hi. I wanted a simple web page with a click-to-toggle background image feature. I found one online which works great, but it has a major flaw. The page is not browser interactive. It seems to be in read-only mode, or something like that.

    ie; Links are inactive, embedded video loads but won't play, I can't copy/save embedded images, or highlight and copy page text to my clipboard.

    There are 4 files used for this template. html page, css style sheet, jquery.js, and script.js files.
    The coding isn't very long and complicated, but I have no clue where the problem lies.

    Here is a direct link to the page on my site. Promise, no spam, malware, or adult content. Source code should be visible in firefox or chrome. But if it's preferential I zip all 4 files up in a folder to download and view in a text editor, I'd be happy to do that.

    Please, if anyone has the time to take a look, I would greatly appreciate that. I really like the design, but it's no good for my needs in the current condition. Thanks

    edit: My link doesn't seem to be working. Are links held for approval? Here's the page url in plain text. http://twilight.blue/design/bgc/
     
    Last edited: May 19, 2019
    TBlue, May 19, 2019 IP
  2. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #2
    The reason your link does not work is explained in the TOS which you read and understood when you signed up.

    That said, I will go look, see if anything pops up for me, and report back.
     
    mmerlinn, May 19, 2019 IP
  3. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #3
    Nothing pops up in the HTML.

    Try removing the DOCTYPE and see if that changes anything.

    Also, since you are currently not using javascript, try removing those references. If you get the page working in HTML before adding javascript, issues will often be easier to find and fix.

    Self closing tags like BR do not need to explicitly be closed. Less chance of typos if you are typing less.

    You might also visit @deathshadow's https://cutcodedown.com/ for ideas on what to do.
     
    mmerlinn, May 19, 2019 IP
  4. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #4
    If you change the #bgimage in the css from this:
    #bgimage{
position:fixed;
top:0; left:0;
width:100%;
height:100%;
z-index:1;
}
    Code (CSS):
    to this
    #bgimage{
top:0; left:0;
width:100%;
height:100%;
z-index:1;
}
    Code (CSS):
    see what happens
    edit: or change the z-index to -1 like this:
    #bgimage{
position:fixed;
top:0; left:0;
width:100%;
height:100%;
z-index:-1;
}
    Code (CSS):
     
    Last edited: May 19, 2019
    malky66, May 19, 2019 IP
  5. No Power

    No Power Peon

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    1
    #5 
    
#bgimage {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
    Code (CSS):
    First line is the key. Everything works as expected after commenting it out or removing completely.
     
    No Power, May 19, 2019 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6 
    
</head>
<body>
<body id="bg">
    Code (markup):
    One of those body tags is superfluous.
    Remove it.

    
<font size="4px">click cube to change background</font
size>
    Code (markup):
    You have an attribute on the end tag. Further, the
    FONT tag has been deprecated for more than two decades. A P tag
    should have been used, and its font defined in your style sheet.

    
</ul>
</div>
</div>
<br />
    Code (markup):
    One of those DIV tags is a stray. Remove it.
    The BR tag to add a blank line is a poor practice.

    
<div id="content">
<a id="top">
<p>My heart …
    Code (markup):
    You did not close the A tag. Probably killed all following
    links.

    NB: Unless you are writing your page in verse, poetry should
    probably be contained in a BLOCKQUOTE. Further, verse is
    preformatted content. Use the PRE tag for the text and you won't
    need all those BR tags, and you can maintain indentations and
    other spacings. Try e e cummings without PRE.

    On or about line 71, you have a P end tag but no start tag.

    
<a href="#top">Go to top</a>
</main>
</div>
</body>
    Code (markup):
    You can't close MAIN because of the A still open. The DIV is
    superfluous. Get rid of it.

    Fixing these errors may expose others. Once the code is valid,
    you can chase logic errors, if any.

    gary
     
    Last edited: May 19, 2019
    kk5st, May 19, 2019 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    You've got a LOT of issues here that I would really suggest you fix. Amongst these is a lack of logical document structure (where are your headings?), CDATA after the charset <meta>, no media targets on your stylesheet <link>, no min-width to make long lines easier to follow, Tags like FONT that have no business in any page written after 1997 (since they stopped being part of the "modern" specification at that time), tables for layout on clearly non-tabular data, presentational images in the markup as IMG tags, full size images doing thumbnail's job resulting in painfully slow page-loads, target attributes shoving new windows/tabs at users whether they want them or not, double-breaks doing paragraph's flipping job -- worse wrapped in a single paragraph when they are CLEARLY multiple paragraphs. (Seriously, /fail/ at 4th grade level grammar.), an obvious blockquote lacking both <blockquote> and <cite>... and you've got the junk HTML 5 "MAIN" tag thrown into what seems to be HTML 3.2 style development.

    The multiple <body> openings probably isn't helping either.

    ... and then, THEN, you're using JavaScript to do something I wouldn't even waste scripting on anymore. To be brutally frank (when am I not?) you clearly have not learned enough HTML to be styling a page or adding scripted behaviors to it yet.

    To implement that background picker, my markup would be something like this:

    
<body>
<!-- this is a sneaky trick for implementing those backgrounds -->
<input type="radio" name="bodyBg" id="background_01" class="toggle" hidden checked>
<input type="radio" name="bodyBg" id="background_02" class="toggle" hidden>
<input type="radio" name="bodyBg" id="background_03" class="toggle" hidden>
<input type="radio" name="bodyBg" id="background_04" class="toggle" hidden>
<input type="radio" name="bodyBg" id="background_05" class="toggle" hidden>
<input type="radio" name="bodyBg" id="background_06" class="toggle" hidden>
<input type="radio" name="bodyBg" id="background_07" class="toggle" hidden>
<input type="radio" name="bodyBg" id="background_08" class="toggle" hidden>
<input type="radio" name="bodyBg" id="background_09" class="toggle" hidden>

<div id="top">

	<h1>Twilight Tales</h1>
	
	<div id="bgPicker" hidden>
		<input type="checkbox" id="pickBackground" class="toggle">
		<label for="pickBackground"></label>
		<ul>
			<li><label for="background_01"><label></li>
			<li><label for="background_02"><label></li>
			<li><label for="background_03"><label></li>
			<li><label for="background_04"><label></li>
			<li><label for="background_05"><label></li>
			<li><label for="background_06"><label></li>
			<li><label for="background_07"><label></li>
			<li><label for="background_08"><label></li>
			<li><label for="background_09"><label></li>
		</ul>
	</div>
    Code (markup):
    All the work -- including the images -- would be set from the CSS. That way users for whom screen media CSS is gibberish aren't saddled with a bunch of nonsense/gibberish that means nothing to them.

    The magic would be that clicking on a <label> that has a "for" attribute is the same as clicking on the INPUT/SELECT/TEXTAREA/BUTTON with a matching ID. Because those first few "hidden" input are first, all you need to do is:

    

html, body {
  /* width and height for making sure aPo works right */
  width:100%;
  height:100%; 
  /* hidden to prevent excess scrollbars, #top will handle scrolling */
  overflow:hidden;
}

.toggle {
  /*
    IE can screw up "hidden" for input/lable relationships, so we want
    to set the toggles to display:block and then hide them off screen.
    this also means we don't have to declare hidden on the input inside
    #bgPicker
  */
  display:block;
  position:absolute;
  left:-999em;
}

#bgPicker {
  /* Show this for screen media CSS. */
  display:block;
}

#top {
  /* #top now behaves as our new BODY */
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-position:center;
  background-size:cover;

}

#background_01:checked ~ #top {
  background-image:url(images/background1.jpg);
}

#background_02:checked ~ #top {
  background-image:url(images/background2.jpg);
}

#background_03:checked ~ #top {
  background-image:url(images/background3.jpg);
}

/* etc, etc, etc */
    Code (markup):
    From there using background-image to style the selection LABEL.

    All without getting a single line of JavaScript involved.

    Note that #top can do double-duty as both our BODY replacement for scrolling behavior so we can apply the backgrounds, AND as the hook for your <a href="#top">Back To Top</a>. Doing the <a name=" nonsense is as outdated and outmoded as FONT tags or TABLE for layout.

    If you REALLY needed to set those backgrounds from the markup, I'd do it using <span style="background-image:url(whatever.jpg);"></span> directly after each input, using ".toggle:checked + span {" as the selector so they could be absolute positioned beneath the content area.
     
    deathshadow, May 19, 2019 IP
  8. TBlue

    TBlue Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    Thank you all for pointing out what an ignorant imbecile I am. Gosh. I just wanted a simple web page, where site visitors could click a menu, to change the background image?
    I do appreciate the quick response and advice though. I promise to test and implement the advised alterations. Busy day today, but I will test these suggested changes asap. As for TOS, I read before posting a link to my site:
    • don't lie
    • don't cheat
    • don't steal
    • don't spam
    • I didn't. So chill.
     
    TBlue, May 19, 2019 IP
  9. Spoiltdiva

    Spoiltdiva Acclaimed Member

    Messages:
    7,738
    Likes Received:
    2,893
    Best Answers:
    53
    Trophy Points:
    520
    #9
    "Ignorant"?....Perhaps, but when it comes to this sort of issue I have you beat on the ignorance thing. As to being an "imbecile" I don't think so. You were astute enough to come here and seek out advice which you promptly received. In all things technical we have an abundance of superb talent here on DP...agreed?:)
     
    Last edited: May 19, 2019
    Spoiltdiva, May 19, 2019 IP
    deathshadow and Brian Ott like this.
  10. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #10
    NO one knows everything about everything, so EVERYBODY is an ignoramus in MOST disciplines. Depending on how one defines 'imbecile' I suspect that all of us either are imbeciles or appear to be imbeciles to others. So don't be so hard on yourself. You are just another human on a LIFE LONG LEARNING CURVE and you will never know everything.
     
    mmerlinn, May 19, 2019 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Never consider ignorant an insult, it just means you don't know. As @Spoiltdiva said, you did the smart thing smart people do when they don't know -- you went looking for answers someplace people who know what they are talking about hang out.

    That's what separates smart from stupid. It's not about what you know,.

    It's about what you DO when you don't know. Do you just wing it, or do you look for help?

    It's about what you DO when new information appears, do you alter your views to fit the information, or do you cling to what you learned first even as fact after fact disproves it?

    It's about what you DO with conflicting information. Do you examine the facts, or do you simply believe whatever the majority or purported "big name" authority figures happen to say?

    "The very powerful and the very stupid have one thing in common. Instead of altering their views to fit the facts, they alter the facts to fit their views...which can be very uncomfortable if you happen to be one of the facts that needs altering." -- The Doctor.
     
    Last edited: May 20, 2019
    deathshadow, May 20, 2019 IP
    mmerlinn, Brian Ott and Spoiltdiva like this.
  12. TBlue

    TBlue Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #12
    Ok thanks everyone. It's true I am a web design novice. Coding illiterate. Ignorant in that respect. However, I did not author the document structure or the scripting. Someone else did (6 years ago?). I just uploaded exact copies of their work to my site. So as far as the document structure and scripting goes, it's actually him you should criticize, not me. As for the general page content, that was my doing. I hastily tossed in a bunch of sloppy page filler, dummy text paragraphs, images, video, links etc - to see how it looks. That's when I noticed things weren't working properly. Hence I came here for advice. From delightfully snarky experts such as yourselves. :)

    As for the solution, what Malky66 suggested seems to work. Changed the z-index from 1 to -1 in the css style sheet. With that single alteration, all the problems I mentioned disappeared. Only one minor issue attached. Now I must click the menu cube to hide the drop down menu, whereas previously I could also click anywhere on the page to hide it. Not a big deal.

    Deathshadow, you raised some good points. Such as the menu thumbnail images are the full sized background images, resized via width & height tags. Again, that wasn't my doing, I'm not the code author, but I understand it's a lousy idea, and I was planning to create separate 2kb thumbnails for the menu. But the menu thumbs and background images should match, and I haven't yet decided which BG images I intend to use. I don't really understand much of your other suggestions, but I'll try to figure that out. FONT tags are obsolete? Geez I never got the memo. Guess I should use span style tags instead, if I only want to change the font style of a few words in a sentence, rather than the entire paragragh.

    Honestly, I wasn't prepared for such overwhelmingly intensive feedback. I expected my post to go completely ignored for at least several months. Or be entirely swept under the pile. But I do appreciate all of you taking the time to examine the problem and quickly offer suggestions. I'll review all your feedback, one item at at time, and try to clean things up a bit. Because I haven't found any other similar templates, which are flawless and up to date, and I currently lack the skill to design my own background image toggling page.
     
    TBlue, May 21, 2019 IP