Jump to content

Goodness

Members
  • Content Count

    34
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Goodness

  • Rank
    Newbie
  1. I removed the openTab("tab1") and added the w3-red as follows: <li><a href="javascript:void(0)" class="tablink w3-red" onclick="openTab(event, 'tab1');">TAB 1</a></li> and that causes the 1st tab to be open. Thanks!
  2. Like this? <ul class="w3-navbar w3-grey"> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li> </ul> <div id="tab1" class="tab w3-red" style="display:block;"> <p>Tab 1 content</p> </div>
  3. I'm using W3.CSS tabs and I have a class assigned so that the active tab is colored. However, when the page loads none of the tabs are open. I have to click on one. I'm wanting the 1st tab to be open and highlighted with the active color when the page is first loaded. Here's my code: <ul class="w3-navbar w3-grey"> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li>
  4. Here's an odd one: I am working on my own machine (hard drive) at the moment and previewing my page(s) in various browsers. In order to make use of template-level content (navigation, footers, etc) I am using <div w3-include-html="includes/filename.html"> I am calling the w3data.js file in the <head> <script src="http://www.w3schools.com/lib/w3data.js"></script> I also have the w3data.js file resident within the website in a 'lib' folder. In that case I call it like this: <script src="lib/w3data.js"></script> Both the w3schools sr
  5. Also Note: Uncommenting these 2 lines, just after the <body> start does not have any effect: <!--.mySlides {width: 100%;} /**/--> <!--#myslideFrame{text-align: center; font-size:0;min-height:100%; font-size:0; text-align: center;position:relative;}-->
  6. Unfortunately the page is not online. It's on my machine. Here's the page source: <!DOCTYPE html> <html> <head> <title>New Site Design</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <style> body {font-family: "Lato", sans-serif} <!--.mySlides {width: 100%;} /**/-->
  7. dsonesuk, I'm not sure why this is working for you and not for me. When I view the version of the page with the totally manual slideshow the copy inside the <span> tags renders perfectly. When I view the version of the page with the new auto/manual slideshow the divs that contain the <span> tags still render but not the copy that's inside the <span> tags. Both pages are using the exact same w3.css. You're not having any issues with the javascript - and my javascript matches what you wrote.
  8. Yes. I've cleared cache and tried it in Firefox, Safari, IE, and Google Chrome. There's obviously something interfering with the rendering of the text inside the <span> tags since the <div> that contains them is being rendered. I say obviously, but it's not obvious to me (yet).
  9. I've been messing with this for several days now and I don't see the issue. My <script> code is exactly as you have listed above. Here is the portion of the page that includes the slideshow: <!-- Slideshow --> <div id="myslideFrame"> <!-- open slideShow frame--> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-1.jpg" style="width:100%; max-height:774px"> <div class="w3-display-bottommiddle w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class=
  10. I've been staring at this code for several hours. So far, I don't see it. It's probably right in front of my eyes but my code matches exactly to what you've shown. I'll give it another fresh look tomorrow. Thanks!
  11. I've checked to be sure that I've accounted for opening and closing divs. I've attached a quick image of what I'm seeing.
  12. I have the onmouseover and onmouseout on the left and right pointer elements. That part is working perfectly, Just can't figure out why my nested text divs aren't working.
  13. Whoops - 1 last thing: Here's an example of one of the 7 mySlides divs: <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-3.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">This Text Should Animate Over The Image</span> </div> </div> The slideshow is working perfectly except the nested div with the class of 'w3-display-toprigh
  14. WAIT! I found my problem. I had a : instead of a " on the id of my wrapper div. Mistake: <div id="myslideFrame:> Fixed: <div id-"myslideFrams"> Everything is working mow. THANKS!!!
  15. Thank you! That helped. Here's what I did: I changed the reference in the JavaScript from 'demo' to 'demodots'. I added a wrapper div around the entire slideshow and gave it id="myslideFrame" Since I am not using the flexbox, I eliminated that from the <style> in the head and in the html. Here's what's happening: There are 7 slides. When the page loads the 1st slide shows in it's proper position but the carousel isn't running. Once I click on any of the controls (demodots or next/prev), a replica of the slideshow appears directly below the 1st image and it start
×
×
  • Create New...