#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Location
    Chicago, Illinois, U.S.A.
    Posts
    163
    Rep Power
    0

    Button requires ActiveX control.


    <div style="border: 1px dashed gray; padding: 1px;">
    <div>
    <button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none'; "title="Blah">
    <font color="#000000" size="1"><b>Show full story.</b></font></button></div>
    <div id="spoiler" style="display: none;">

    Blah blah blah, spoiler.

    </div></div>


    It's a simple button that says "Show full story" and when you click on it, it expands.

    Only problem is, on some computers, IE will pop up a window that asks you permission to enable ActiveX control or whatever, some IE does not.

    Can the code be written better to not have that?

    Thanks.
  2. #2
  3. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,453
    Rep Power
    9645
    Nothing in there has anything to do with ActiveX. Could the issue be somewhere in what's being shown?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Location
    Chicago, Illinois, U.S.A.
    Posts
    163
    Rep Power
    0
    I'd say no, it's only going to be <P> text.

    Okay last question:

    I already have a HTML page which has a day and night theme. In the day hours (6 a.m. to 6 p.m.) uses white bg and black text, and night hours uses black bg and white text.

    I already have the code in javascript, I want to put it into 2 buttons.

    <script type="text/javascript">
    var hour = (new Date()).getHours();
    document.bgColor = (hour >= 6 && hour <= 18) ? "white" : "black";
    document.body.style.color = (hour >= 6 && hour <= 18) ? "black" : "white";
    </script>

    How can I incorporate 2 buttons, 1 called Day time and the other called Night time?

    Thanks.
  6. #4
  7. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,453
    Rep Power
    9645
    First, I suggest moving that concept into CSS classes. Not only does it reduce the Javascript work, it makes adjusting the themes much easier in case you find something else you want to change.
    css Code:
    body.theme-day { background: white; color: black; }
    body.theme-night { background: black; color: white; }

    Code:
    <body class="theme-day">
    Javascript to remove the existing theme and add the other could be
    javascript Code:
    function change_theme(theme) {
    	document.body.className = document.body.className.replace(/\s*theme-\S+/, "") + " theme-" + theme;
    }

    That removes an existing "theme-X" class and adds in the new theme-whatever. To call it,
    javascript Code:
    change_theme("day");
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Location
    Chicago, Illinois, U.S.A.
    Posts
    163
    Rep Power
    0
    Blah, I don't see it working yet.

    Code:
    <style>
    {
    body.theme-day { background: white; color: black; }
    body.theme-night { background: black; color: white; }
    }
    </style>
    
    <script type="text/javascript">
    function change_theme(theme) {
    	document.body.className = document.body.className.replace(/\s*theme-\S+/, "") + " theme-" + theme;
    }
    </script>
    
    <!-- CSS button: -->
    
    <button type="button" class="button" onclick="<body class="theme-night">"; this.parentNode.style.display = 'none'; "title="Blah">
    <font color="#000000" size="1"><b>Night version.</b></font></button>
    
    <!-- JavaScript button -->
    
    <button type="button" class="button" onclick="change_theme("night")"; this.parentNode.style.display = 'none'; "title="Blah">
    <font color="#000000" size="1"><b>Night version.</b></font></button>
    
    <P>Test.
    You can put a <body> in a <button>?
    Last edited by LostShadow; October 20th, 2017 at 08:57 AM.
  10. #6
  11. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,453
    Rep Power
    9645
    Originally Posted by LostShadow
    You can put a <body> in a <button>?
    No, it's the document's body. You know, the one that exists in every single HTML document?

    There's quite a lot wrong with that code there...
    Code:
    <html>
    <head>
    	<style type="text/css">
    		body.theme-day { background: white; color: black; }
    		body.theme-night { background: black; color: white; }
    
    		/* hide elements for the opposite theme */
    		body.theme-day .theme-night { display: none; }
    		body.theme-night .theme-day { display: none; }
    	</style>
    	<script type="text/javascript">
    		function change_theme(theme) {
    			document.body.className = document.body.className.replace(/\s*theme-\S+/, "") + " theme-" + theme;
    		}
    	</script>
    </head>
    
    <body>
    	<button class="theme-night" type="button" onclick="change_theme('day');">Day version</button>
    	<button class="theme-day" type="button" onclick="change_theme('night');">Night version</button>
    </body>
    </html>
    Note that I moved the hiding into CSS - it's quite powerful so you should really spend the time to learn about it.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Location
    Chicago, Illinois, U.S.A.
    Posts
    163
    Rep Power
    0
    Okay wow works perfect.

    The javascript is needed with the CSS?
  14. #8
  15. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,453
    Rep Power
    9645
    The CSS is how you change the appearance of the page. That's both the day/night style as well as when the buttons are visible.

    The Javascript is how the user performs actions on the page. In this case, it's how you change the class - once the class is changed, CSS will kick in automatically and update the appearance (ie, change the theme and show/hide the buttons).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Location
    Chicago, Illinois, U.S.A.
    Posts
    163
    Rep Power
    0
    Oh, I thought you were trying to get me to convert to CSS instead of JavaScript, therefore you did it in JavaScript and CSS, and therefore, I tried it in 2 buttons, 1 for CSS and 1 for JavaScript.

    So you did this having to use 2 different languages.

    Is it possible to do this in CSS only or JS only?
  18. #10
  19. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,453
    Rep Power
    9645
    CSS can do the appearance changes but it cannot trigger based on a user action like clicking a button. Javascript can handle the button clicking and it can programmatically alter the styles that are applied by CSS, so in that sense it could be done with only Javascript, however the point I was trying to make is that you should not, in fact, try to do it that way.

    CSS is good for appearance and Javascript is good for behavior. Use the right tool for the job.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Location
    Chicago, Illinois, U.S.A.
    Posts
    163
    Rep Power
    0
    Originally Posted by requinix
    Code:
    <html>
    <head>
    	<style type="text/css">
    		body.theme-day { background: white; color: black; }
    		body.theme-night { background: black; color: white; }
    
    		/* hide elements for the opposite theme */
    		body.theme-day .theme-night { display: none; }
    		body.theme-night .theme-day { display: none; }
    	</style>
    	<script type="text/javascript">
    		function change_theme(theme) {
    			document.body.className = document.body.className.replace(/\s*theme-\S+/, "") + " theme-" + theme;
    		}
    	</script>
    </head>
    
    <body>
    	<button class="theme-night" type="button" onclick="change_theme('day');">Day version</button>
    	<button class="theme-day" type="button" onclick="change_theme('night');">Night version</button>
    </body>
    </html>
    Okay 3 things.

    Looks like the IE popup about running ActiveX control is only on school computer. None of the CSS or JS buttons work if you don't click allow. The expanding button, and the color-change button day time / night time button. Only on school computer.

    I'm curious how people on smartphones view websites, do they view server-side differently? Cuz now I'm worried that people viewing the page on smartphones may have that ActiveX control or some other factor that I don't know about (I use a flip phone for a cell phone, so).

    2nd question, does IE load the images that are enclosed in the "expand" button? So when you click expand, more text or images are displayed. Did IE load the images before the user clicked expand?

    3rd question, none of the CSS / JS buttons work when viewing it off-line. Like when the .html file is on the computer, and I right-click, open with IE, they don't work. Is it supposed to be like that?
  22. #12
  23. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,453
    Rep Power
    9645
    Like I said way back when, there is nothing about ActiveX in there. IE can say whatever it wants. I vaguely remember it having a warning about dynamic content or something, possibly saying "...such as ActiveX", and that could be because of Javascript restrictions on the computers. You'd have to talk to IT about that.

    So,
    1. Sometimes the content smartphones receive from the server is different, yes, but that's an entirely different situation than what you're dealing with here.
    2. It should.
    3. No, it's not supposed to be like that. Do you have any restrictions set up? Does it give any warnings about the content? Errors when you click the buttons? Does the page work if you try it with a competent browser?

IMN logo majestic logo threadwatch logo seochat tools logo