Jump to content

Search the Community

Showing results for tags 'HTML'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 704 results

  1. Is it possible to use this lightbox code with multiple galleries? At the moment, when using it with different galleries, lightbox will pop up, but it only show first gallery, and the others won't display. I have implemented this lightbox code with my PHP code and for the first gallery, everything is fine, but when I click others, only those gallery thumbnails will show up, but the currentSlide isn't and I understand that code changes only in the first gallery. My code: <div class="row"> <div class="row-inner" id="ajax-posts"> <?php while( $refs->have_posts() ): $refs->the_post(); // get_template_part('content/content', 'reference'); $galleryarray = get_post_gallery_ids($post->ID); ?> <div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>"> <a> <div class="bg_img cursor"<?php if ( $thumbnail_id = get_post_thumbnail_id() ) { if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) ) printf( ' style="background-image: url(%s);"', $image_src[0] ); } ?> onclick="openModal(<?php echo $i; ?>);currentSlide(<?php echo $id ?>)"> </div> <h3><?php the_title(); ?></h3> <p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p> </a> </div> <!-- Modal --> <div id="myModal-<?php echo $i; ?>" class="modal"> <span class="close cursor" onclick="closeModal(<?php echo $i; ?>)">&times;</span> <div class="modal-content"> <?php foreach ($galleryarray as $index => $id) { $image = wp_get_attachment_image_src( $id, ‘thumb’ ); /* $attachment_meta = wp_get_attachment( $id );*/ $number = $index+1; ?> <div id="img-<?php echo $id; ?>" class="mySlides"> <div class="numbertext"><?php echo $number; ?> / <?php echo count($galleryarray); ?></div> <img id="<?php echo $id; ?>" src="<?php echo $image[0]; ?>" style="width:100%"> </div> <?php } ?> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <?php foreach ($galleryarray as $index => $id) { $image = wp_get_attachment_image_src( $id, ‘thumb’ ); /* $attachment_meta = wp_get_attachment( $id );*/ $alt = get_post_meta( $id, '_wp_attachment_image_alt', true); $number = $index+1; ?> <div class="column"> <img id="<?php echo $id; ?>" class="demo cursor" src="<?php echo $image[0]; ?>" style="width:100%" onclick="currentSlide(<?php echo $number ?>)" alt="<?php echo $alt; ?>"> </div> <?php } ?> </div> </div> <?php $i++; endwhile; ?> </div> </div> function openModal(i) { document.getElementById('myModal-'+i).style.display = "block"; document.getElementById('pageHeader').style.zIndex = "0"; document.getElementById('pageFooter').style.zIndex = "0"; document.getElementById('pageContainer').style.textAlign = "left"; } function closeModal(i) { document.getElementById('myModal-'+i).style.display = "none"; document.getElementById('pageHeader').style.zIndex = "10"; document.getElementById('pageFooter').style.zIndex = "9"; document.getElementById('pageContainer').style.textAlign = "center"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length;} console.log(slideIndex); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } Is it possible to change that code somehow to get it working, or maybe better solution is to sum up every gallery array to one, and make one Modal, where those galleries pop up only when clicking on the right gallery?
  2. I have an html email template with social media icons in the footer. When viewed on mobile devices for some reason they are stacking vertically. Below is the footer code <tr> <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN FOOTER // --> <table border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%"> <tbody> <tr pardot-removable=""> <td align="left" class="footerContent" pardot-data="link-color:#ffffff;" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: left; padding: 20px; background: rgb(55, 59, 58);" valign="top"> <div>&nbsp;</div> <div style="text-align: center;"><img alt="Partner Logos" border="0" src="http://info.mission43.org/Mission43_PartnerLogos_Group_WHITE" style="border-width: 0px; border-style: solid;"><br> <br> <a href="https://www.facebook.com/Mission43Idaho/" style="text-size-adjust: 100%; font-weight: normal; color: #ffffff;"><img alt="Facebook" border="0" height="24" src="http://info.mission43.org/l/427472/2017-10-04/7w1mjc/427472/270350/light_facebook_48.png" style="width: 24px; height: 24px; margin-left: 15px; margin-right: 15px; border-width: 0px; border-style: solid;" width="24"></a><a href="https://www.instagram.com/mission43/?hl=en"><img alt="Instagram" border="0" height="24" src="http://info.mission43.org/l/427472/2017-10-04/7w1mj9/427472/270348/light_instagram_48.png" style="width: 24px; height: 24px; margin-left: 15px; margin-right: 15px; border-width: 0px; border-style: solid;" width="24"></a><a href="https://www.linkedin.com/company-beta/10843452/"><img alt="LinkedIn" border="0" height="24" src="http://info.mission43.org/l/427472/2017-10-04/7w1mhy/427472/270344/light_linkedin_48.png" style="width: 24px; height: 24px; margin-left: 15px; margin-right: 15px; border-width: 0px; border-style: solid;" width="24"></a><a href="http://www.mission43.org/"><img alt="Mission43" border="0" height="24" src="http://info.mission43.org/l/427472/2017-10-04/7w1mj1/427472/270346/light_link_48.png" style="width: 24px; height: 24px; margin-left: 15px; margin-right: 15px; border-width: 0px; border-style: solid;" width="24"></a></div> </td> </tr> <tr> <td align="left" class="footerContent" pardot-data="link-color:#ffffff;link-underline:underline;" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-size: 10px; line-height: 15px; text-align: left; padding: 0px 20px 20px; background: rgb(55, 59, 58);" valign="top"> <hr> <div style="text-align: center;"><a href="http://www.jkaf.org/" style="color: rgb(255, 255, 255);"><img alt="" border="0" src="http://info.mission43.org/l/427472/2017-10-04/7w1mhw/427472/270342/JKAF_Logo.png" style="border-width: 0px; border-style: solid;"></a></div> <div style="text-align: center;"><strong>Our mailing address is:</strong>%%account_address%% <hr><em>Copyright © %%current_year_YYYY%%, All rights reserved.&nbsp;</em>J.A. and Kathryn Albertson Family Foundation. You are receiving these emails because you provided Mission43 with your email address and have been in contact with us. You can update your contact information, or if you no longer wish to receive these types of emails you can <a href="%%unsubscribe%%" style="color: rgb(255, 255, 255);">unsubscribe from this list</a></div> </td> </tr> <tr> <td align="left" class="footerContent original-only" pardot-data="link-color:#ffffff;" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: left; padding: 0px 20px 20px; background: rgb(55, 59, 58);" valign="top"><a href="%%unsubscribe%%" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-weight: normal; text-decoration: underline;">unsubscribe from all emails</a>&nbsp;&nbsp;&nbsp;<a href="%%email_preference_center%%" style="text-size-adjust: 100%; color: rgb(255, 255, 255); font-weight: normal; text-decoration: underline;">update subscription preferences</a>&nbsp;</td> </tr> </tbody> </table> <!-- // END FOOTER --></td> </tr> Not sure if the fix needs to be in the footer or the CSS so I am including my CSS as well. <style type="text/css">#outlook a { padding: 0; } .body{ width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } p { margin: 1em 0; } table td { border-collapse: collapse; } /* hide unsubscribe from forwards*/ blockquote .original-only, .WordSection1 .original-only { display: none !important; } @media only screen and (max-width: 480px){ body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */ body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */ #bodyCell{padding:10px !important;} #templateContainer{ max-width:600px !important; width:100% !important; } h1{ font-size:24px !important; line-height:100% !important; } h2{ font-size:20px !important; line-height:100% !important; } h3{ font-size:18px !important; line-height:100% !important; } h4{ font-size:16px !important; line-height:100% !important; } #templatePreheader{display:none !important;} /* Hide the template preheader to save space */ #headerImage{ height:auto !important; max-width:600px !important; width:100% !important; } .headerContent{ font-size:20px !important; line-height:125% !important; } #bodyImage{ height:auto !important; max-width:560px !important; width:100% !important; } .bodyContent{ font-size:18px !important; line-height:125% !important; } .templateColumnContainer{display:block !important; width:100% !important;} .columnImage{ height:auto !important; max-width:260px !important; width:100% !important; } .leftColumnContent{ font-size:16px !important; line-height:125% !important; } .rightColumnContent{ font-size:16px !important; line-height:125% !important; } .footerContent{ font-size:14px !important; line-height:115% !important; } .footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */ } </style> Any ideas would be much appreciated. Thanks!
  3. juan.rojas89

    White spaces in my table

    Hi people! I'm having an issue in my coding, I created a table and there is a white spacing between cells that I cant get rid of. I have used cellpadding, styled the no border and still comes up. I'm also programming in HubSpot so I don't know if this has anything to do since I'm still doing it in HTML. This is an example of the code used: <tr style="height: 127.056px; border: 0px; border-spacing: 0px;"> <td style="width: 304px; background-image: url('https://cdn2.hubspot.net/hubfs/2294395/gray_BB-07-1.png'); background-size: 100% 100%; background-repeat: no-repeat; height: 127.056px;"> <h1 style="color: #84161a; text-align: center; font-family: Agency FB;"><span style="font-size: 36px;">ADMIN&nbsp;<span style="color: #444444;">EMILY</span></span></h1> </td> <td style="width: 314px; background-image: url('https://cdn2.hubspot.net/hubfs/2294395/gray_BB-07-1.png'); background-size: 100% 100%; background-repeat: no-repeat; height: 127.056px;"> <h1 style="color: #84161a; text-align: center; font-family: Agency FB;"><span style="color: #444444; font-size: 36px;"><span style="color: #800000;">MARKETING</span>&nbsp;EMILY</span></h1> </td> <td style="width: 298.208px; background-image: url('https://cdn2.hubspot.net/hubfs/2294395/gray_BB-07-1.png'); background-size: 100% 100%; background-repeat: no-repeat; height: 127.056px;"> <h1 style="color: #84161a; text-align: center; font-family: Agency FB;"><span style="font-size: 36px;">DATA <span style="color: #444444;">EMILY</span></span></h1> </td> <td style="width: 302.792px; background-image: url('https://cdn2.hubspot.net/hubfs/2294395/gray_BB-07-1.png'); background-size: 100% 100%; background-repeat: no-repeat; height: 127.056px;"> <h1 style="color: #84161a; text-align: center; font-family: Agency FB;"><span style="font-size: 36px;">SALES <span style="color: #444444;">EMILY</span></span></h1> </td> <td style="width: 320px; background-image: url('https://cdn2.hubspot.net/hubfs/2294395/gray_BB-07-1.png'); background-size: 100% 100%; background-repeat: no-repeat; height: 127.056px;"> <h1 style="color: #84161a; text-align: center; font-family: Agency FB;"><span style="font-size: 36px;">CUSTOMER SERVICE <span style="color: #444444;">EMILY</span></span></h1> </td> </tr>
  4. BACKGROUND: I would like to embed a Matomo widget into a page, but I dare not embed it directly. For, to do so would require that I expose the authorization token that enables knowledgeable visitors of Matomo -- and coding in general -- the ability to view everything about my website that I am able to view. As I, myself, do not yet know what to do with everything that Matomo makes available (it appears endless), I certainly do not want to put it all into the hands of others willy-nilly. It is simply bad business. OBJECTIVE: Read the data into a PHP file, and load the result into the src attribute of an iframe. Below is sample code taken directly from the Matomo website. (The absence of the authorization token assumes that the superuser has given access to all users the right to view whatever they like. I do not wish to grant this privilege). SIMPLE URL https://www.nudge.online/_utilities/php/matomo/index.php?module=Widgetize&action=iframe&widget=1&moduleToWidgetize=Live&actionToWidgetize=getSimpleLastVisitCount&idSite=1&period=day&date=yesterday&disableLink=1&widget=1 EMBEDDING CODE <div id="widgetIframe"><iframe width="100%" height="350" src="https://www.nudge.online/_utilities/php/matomo/index.php?module=Widgetize&action=iframe&widget=1&moduleToWidgetize=Live&actionToWidgetize=getSimpleLastVisitCount&idSite=1&period=day&date=yesterday&disableLink=1&widget=1" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe></div> Obviously, there is no difference in the URLs. QUESTION: If an image can be created by a PHP file and then read into the src attribute of an image tag, surely it must then also be possible to read the HTML content of a PHP file into the src attribute of an iFrame. What is the necessary header argument required? I have tried both " header('Content-Type: text/html'); and header('Content-Type: text/plain'); Neither works! Or, am I just guessing. And, what I am trying to do simply does not work. Roddy
  5. Don't matter the browser size, I need that the picture ocup 100% the browser height. For this, I just set the img heith in 100vh, and the code works fine. But, I also need this image be horizontal centered in the browser. For this, I've set the text align of my DIV that contain my IMG in center. When the browser width is greater than the img width, it works fine. But, if the browser width is less than the img width, the img go left aligned. I really need that img be centered in the browser size all the time, don't matter the conditions. I just know that I can do it replacing the img for background-image and set the background-position in center. But, if I did it, Google will not index my images and it results in a big trouble for me. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link type="text/css" rel="stylesheet" href="code/css/test.css"> </head> <body> <div> <img src="image.jpg"> </div> </body> </html> * { margin: 0; padding: 0 } div { background-color: red; text-align: center; } img { height: 100vh; } (The picture I'm working is 1680px x 945px) At the image below I'm showing the correct horizontal align for this picture. Centered: https://uploaddeimagens.com.br/imagens/certo-jpg-feef13d2-44d2-407b-8b1b-f334107cb371 And... At this another image, I'm showing the error it ocurrs. The picture is left aligned and crop only the right side of the picture: https://uploaddeimagens.com.br/imagens/errado-jpg-746c72b8-36d2-4942-9895-0cfb43abd77d What I need is... When the browser width is less than the img width, the picture still be centered in the browser, resulting that the image would be cropped both sides, ledt and right sides, and it will result in this specifically image, the church in background will be centered in the browser all the time. It was a simple example that what I need. Is there any way for center this image like I need using only CSS? I will be very grateful to anyone who can help me with this problem. Thanks. Greetings from Brazil.
  6. Hello, I don´t know where to post this, then, I'm doing it in here... I'm following the AWESOME HTML 5 tutorial from w3schools.com and I can't get the right answer to one of their exercises about Images (this one: https://www.w3schools.com/html/exercise.asp?filename=exercise_images5). This is my answer: <!DOCTYPE html> <html> <body> <img src="pic_trulli.jpg" style="width:304px;height:228px;"> </body> </html> However, I keep getting an alert telling me that my answer is wrong. Therefore, I'd like to ask if my answer is correct and the system is wrong, or if my answer is wrong. If my answer is wrong, what am I doing wrong? Thanks!
  7. PLight

    Creating Dynamic Checkbox Names

    I have a need for creating checkbox names that go through a loop and are named by concatenating the name of the field with a number that is the loop index. <%if pDiscussed(i) <> "True" then%> <input type="checkbox" name="ynDiscussed" & CStr(i) value="0" /> <%else%> <input type="checkbox" name="ynDiscussed" & CStr(i) value="1" checked /> <%end if%></td> I've done this before with text boxes and there are no problems but somehow with a checkbox it will not work. I've even tried using an array (ynDiscussed[]) along with... <%if pDiscussed(i) <> "True" then%> <input type="checkbox" name="ynDiscussed(" & CStr(i) & ")" value="0" /> <%else%> <input type="checkbox" name="ynDiscussed(" & CStr(i) & ")" value="1" checked /> <%end if%></td> but it doesn't like that either. I can't even substitute in a number instead of the CStr(i) and have it pick it up - my code reading: <input type="checkbox" name="ynDiscussed" & "1" value="0" /> Is this simply impossible or what am I missing? Any help is very much appreciated. Cheers!
  8. BACKGROUND: I have a plain text file with an .html extension. In the file is a <p> element into which I would like to enter the current date. The file is called from its hostpage via a jQuery $.get() statement that is followed with an AJAX call to a PHP processing file that returns JSON that can be processed in the AJAX success function as an object. QUESTION: If I place the PHP necessary to create the date in the text file with the .html extension, will it appear in the hostpage when called by the $.get() method? NOTE: My server is programmed to accept PHP in files with a .html extension. Mind you, the text file has neither <head>, nor <body> element, let alone a <DOC> header. Roddy If I enter the data with PHP before the AJAX
  9. I have a need for creating checkbox names that go through a loop and are named by concatenating the name of the field with a number that is the loop index. <%if pDiscussed(i) <> "True" then%> <input type="checkbox" name="ynDiscussed" & CStr(i) value="0" /> <%else%> <input type="checkbox" name="ynDiscussed" & CStr(i) value="1" checked /> <%end if%></td> I've done this before with text boxes and there are no problems but somehow with a checkbox it will not work. I've even tried using an array (ynDiscussed[]) along with... <%if pDiscussed(i) <> "True" then%> <input type="checkbox" name="ynDiscussed(" & CStr(i) & ")" value="0" /> <%else%> <input type="checkbox" name="ynDiscussed(" & CStr(i) & ")" value="1" checked /> <%end if%></td> but it doesn't like that either. I can't even substitute in a number instead of the CStr(i) and have it pick it up - my code reading: <input type="checkbox" name="ynDiscussed" & "1" value="0" /> Is this simply impossible or what am I missing? Any help is very much appreciated. Cheers!
  10. bartonlewis

    viewport is larger than body

    For some reason I cannot determine, there is a scroll bar at the bottom of my page which accesses a blank portion of the viewport on the right. I have a feeling there is something in the stylesheet of the code I am accessing for the slideshow that is responsible, but I don't know how to correct it. I have removed all extraneous code except for the slideshow. Can anybody help? Thank you. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton's wall cuts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> * {box-sizing: border-box;} body { width: auto; margin: 0 auto 0; } .flex-container { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 50px 50px 50px; padding-bottom: 30px; align-items: center; justify-content: center; font-family: "europa",sans-serif; font-size: 105%; } .nav { margin: 0 30px; } a { text-decoration: none; color: black; } div.nav a { font-size: 1.8em; } .main { width: auto; display: flex; justify-content: space-between; align-items: center; margin-top: 100px; } .browse { width: 20%; margin: 0 5%; } p.indent1 { text-indent: 1em; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.4em; color: black; display: block; margin: 0; } /* CSS FOR SLIDESHOW */ .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { display: flex; justify-content: center; width: ; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 15px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } /* END OF CSS FOR SLIDESHOW */ .indent { text-indent: -9999px; } .about { width: 66%; margin: 0 auto; margin-top: 5%; } .about p { padding: 15px; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.75em; color: black; } .underline { text-decoration: underline; font-variant: small-caps; font-size: 1.1em; } a:hover { text-decoration: underline; } footer { background: #827e90; height: 75px; margin-top: 5%; } footer p { padding: 25px; font-family: "europa",sans-serif; font-size: 1.1em; letter-spacing: .8px; color: white; } .flex-container-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; padding-top: 0px; justify-content: space-between; align-items: center; } .flex-container-footer>div { margin: 0px 50px; } .social a { color: white; } .fa { padding: 10px; font-size: ; width: ; text-align: center; text-decoration: none; border-radius: 50%; } .copyright p { font-family: "europa",sans-serif; color: black; font-size: 1.1em; letter-spacing: .8px; line-height: 135%; font-weight: 500; } </style> </head> <body> <div class="parallax"> <div> <h1>text</h1> </div> </div> <section class="main"> <div class="browse"> <h3>text</h3> <h4>text</h4> <p>text</p> <p>text</p> <p>text</p> </div> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="http://bartonlewisfilm.com/img_287-163.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="http://bartonlewisfilm.com/img_162-373.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="http://bartonlewisfilm.com/img_coors_light.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> </div> <div class="browse"> <p class="indent">Oversize</p> </div> </section> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <div class="about"> <p>text text text</p> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 3000); // Change image every 3 seconds } </script> <footer> <div class="flex-container-footer"> <div> <p>copyright © 2018 by Barton Lewis</p> </div> <div class="social"> <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a> <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a> </div> </div> </footer> <script> </script> </body> </html>
  11. BACKGROUND: Recently I learned how to embed directly a Matomo widget into my website. Although there are several ways to make this happen, I am only able to achieve two of them at this time: one, gives all autonomous users access to all Matomo's reporting widgets and a large number of reporting methods; the other, exposes the superuser's authorization token that would leave a disastrous breach in database security. DILEMMA: Although I am able to retrieve the widget via CURL in an invisible PHP file, and consequently embed the widget's contents via the src attribute of an iframe, I am not able to do so with the same rich formatting that can be achieved when the same HTTP request is placed directly into the src attribute of the iframe. Either cURL is stripping away valuable information or the Browser is unable to process the information provided in the format provided. QUESTION: What must I do in order to get cURL to behave in a manner that produces information compatible with an ordinary web-browser? Roddy
  12. How i make a Real time comment-replay script system in a website ?
  13. Hello, I have the following issue with this dropdown menu. The menu is a side panel. Clicking on the option shows the desired page but, the problem is that the options in the submenus (level 2 and 3) jump away / dissappear one way or another. What I want to see as a result is: if is clicked on a submenu then the submenu is still visible. Is there someone who can give a solution about how to solve this. HTML PART: <?php if (!isset($_GET['menuquery'])){ $_GET['menuquery']=''; } ?> <html> <head> <meta charset="utf-8" /> <title>menu</title> <link rel="prefetch" href="http://"> <link rel="stylesheet" type="text/css" href="http://localhost/Begin/CSS/sidepanel/sidepanel-frm.css" media="screen" /> <title>Control Panel </title> </head> <body style="color: white;"> <div class="sidepanel_wrap"> <div class="pan_left"> <div style="height: 50px;"> <?php echo $_SERVER['HTTP_HOST']; ?> </div> <div class="sidenav"> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=home">Home</a> <button class="dropdown-btn">Level-1a <i class="fa fa-caret-down"></i> </button> <div class="dropdown-container"> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2a">Level-2a</a> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2b">Level-2b</a> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2c">Level-2c</a> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2d">Level-2d</a> </div> <button class="dropdown-btn">Level-1b <i class="fa fa-caret-down"></i> </button> <div class="dropdown-container"> <button class="dropdown-btn">Level-2b <i class="fa fa-caret-down"></i> </button> <div class="dropdown-containerl3"> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level3a">level-3a</a> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level3b">Level-3b</a> </div> </div> </div> </div> <div style="color: black;"> <?php var_dump($_GET['menuquery']); if (!isset($_GET['menuquery'])){ echo 'welcome'; } if (isset($_GET['menuquery'])){ if (($_GET['menuquery']) == 'home' ){ echo '<br>you clicked home !'; } if (($_GET['menuquery']) == 'level2a' ){ echo '<br>you clicked level2a !'; } if (($_GET['menuquery']) == 'level2b' ){ echo '<br>you clicked level2b !'; } if (($_GET['menuquery']) == 'level2c' ){ echo '<br>you clicked level2c !'; } if (($_GET['menuquery']) == 'level2d' ){ echo '<br>you clicked level2d !'; } } ?> </div> </div> <script> /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */ var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } </script> </body> </html> CSS PART: body{background-color:#F3E5AB;} .sidepanel_wrap { width: 1880px; height: 860px; /*border: solid blue 2px;*/ display: flex; flex-direction: row; } .pan_left { display: inline-block; width: 235px; height: 860px; background-color: #67591F; color: #F3E5AB; } .main_panel_wrap { width: 1640px; height: 860px; background-color:#F3E5AB; } /* Fixed sidenav, full height */ .sidenav { width: 235px; height: 700px; position: relative; z-index: 1; top: 10; left: 0; background-color: #67591F; overflow-x: hidden; padding-top: 20px; } /* Style the sidenav links and the dropdown button */ .sidenav a, .dropdown-btn { padding: 6px 8px 6px 16px; text-decoration: none; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans,serif; font-size: 14px; color: #93FFE8; display: block; border: none; background: none; width: 100%; text-align: left; cursor: pointer; outline: none; } /* On mouse-over */ .sidenav a:hover, .dropdown-btn:hover { color: #f1f1f1; } /* Add an active class to the active dropdown button */ .active { background-color: #4863A0; color: white; width:100%; } /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */ .dropdown-container { display: none; background-color: #2B547E; padding-left: 0px; color: yellow; } .dropdown-containerl3 { display: none; background-color: #566D7E; padding-left: 0px; } /* Optional: Style the caret down icon */ .fa-caret-down { float: right; padding-right: 20px; color: #93FFE8; } /* Some media queries for responsiveness */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} }
  14. DILEMMA: Visitors to the mainpage of my website can fill the middle section of the page from the page's navigation bar in either of two ways. Both ways employ Javascript: one, copy a div already on the page into another div on the same page; and two, copy the contents of a div on a another page into same. What I would like to do now is to copy the contents of a div already on the page with a call from the contents of a div that was previously on another page. QUESTION: How does one get a div to replace its own content when the div whose contents needs to be replaced has been filled with content from another page? Roddy
  15. sgt_spike

    Content not showing

    I have a table pulling data from a database. Everything works getting the data to show in the table, however the content under the table isn't showing up. I'm using bootstrap 4.0 for layout, so I have rows and cols with the table being the third row and two other rows, not showing, under the 3rd row. I've moved one row about the table row and it show up, but put it back under the table and it disappears. I've ensured I have the right amount of div tags for each of the rows and cols. I'm at a loss
  16. Hello I have the following javascript code.It is suppose to execute when the html page is done loading but in stead it executes and then nothing happend (the page seems like it is loading something but nothing ever happens) Here is my code : function LoadXML() { if(window.XMLHttpRequest) { var xmlhttp = new XMLHttpRequest(); } else{ var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (this.readyState == 0) { alert("im here 0"); } if (this.readyState == 1) { alert("im here 1"); } if (this.readyState == 2) { alert("im here 2"); } if (this.readyState == 3) { alert("im here 3"); } if (this.readyState == 4) { alert("im here 4"); PopulateImages(this); } }; xmlhttp.open("GET", "person.xml", true); xmlhttp.send(); } Feels like I created an infinite loop. The alert message is for debugging purposes. I get the alert message "im here 1"(not 0,2,3,4 just 1) and then the page just keeps on loading and loading and nothing is happening. Cannot open developer tools to check what code is bugging out(if I do than no resources at yet been loaded so there is nothing I can check to try and figure out the problem). I know the code will have worked if my PopulateImages function is called but it is never called.
  17. Iven

    CSS NOT CHANGING DYNAMICALLY

    Hello I have a problem. I have been playing around with element width/heights and positioning to make sure everything look cool and neat regardless of how the window(or web browser window) is resized. One thing that constantly comes up is elements within a div that gets forced out of the div For example If I have a div and I set the width/height to percentages and I place elements within the div lets say a form with two inputs for username and password. If I resize my window very small there comes a point where the input boxes are totally pushed out of the div? Why is that and how can I fix it so that the element(inside div) also resizes as the div gets resizes(because of the window being resized). I am confused because I am thinking that if my div's width/height are percentages they resize dynamically as my window gets resizes why isn't this happening to the inputs or other elements(I tried with an image element and a few p elements nested inside the div) PLEASE NOTE(I already tried relative positioning didn't work, I also gave my form width/height percentages but that also doesn't work) Here is my example code for a better understanding If you look at the image called WRONG.png you will see my inputs from my form inside the div is pushing OUTSIDE the div?
  18. Hello I have a HTML page with a background image My image looks fine at full screen(normal screen) However when I change the width of my browser to half the background image gets this random white space at the bottom of the page,I want it to still cover the entire browser window but the white space makes it look really bad.
  19. IvanConway

    Responsive Form Design

    I have designed a form using Dreamweaver CS3. The form was designed using tables. I am having an issue with a section of the form that contains 4 columns. Column 1 is used as the description or label for the input field in column 2. The same applies for column 3 & 4. I am trying to design a media query that will make the form more responsive on smaller mobile devices and tablets. I have attached a section of my form containing the 4 columns and included the media query I am currently using. The overall design has been working successfully for over two years apart from the responsiveness issue on smaller mobile devices and tablets. Apart from a total re-design of the entire layout, is it possible to make the 4 column table more responsive using the table method I have attached. table.html
  20. Hi everyone, Have been working with video backgrounds and everything is going great. I have surfed the web and I have been trying to find out how to display an image after a video plays. I know how I can do a poster image before a video plays, I want a poster image to be displayed after the video is done. Now I don't know where I need to post this so I figure I start here. I will post my code down below so you can take a look at what I already have. Thanks in advance! <video onloadstart='this.volume=0.3' id='bg-video-index' onclick='playVideo' autoplay> <source src='media/bg-video/bg-video.mp4' type='video/mp4'> Your browser does not support HTML5 video. </video> <script src="text/javascript"> function playVideo(){ var video = document.getElementById('bg-video-index'); video.play(); video.addEventListener('ended',function(){ window.location = 'media/images/bg/logo.png'; }); } </script>
  21. IvanConway

    State/Country Form Fields

    Being reasonably new at generating javascript, I am trying to create a form where the client enters the State of Birth (Queensland, Victoria, Tasmania etc) and by using javascript the Country of Birth is auto filled with "Australia". I have got to a stage where I can auto fill the Country field with a small js script with either onClick or mouseOver however I am at a loss with the code to be able to fill the Country field by entering the state name in the State field. At 75 I'm running out of brains and would appreciate a little help please. Autofill.html
  22. I am building a site for a friends business and it will be relatively basic but will have a blog. My plan was to use wordpress and the generatepress theme as it is so lightweight. I want to avoid using a pagebuilder because I want to be comfortable building with the actual code. Also my understanding is pagebuilders can add bulky unused code that slows the site down. So I was thinking of using a CSS based framework. I figure the site won’t have much interactivity so I can always add that individually with javascript/jquery or a wordpress plug in, avoiding the use of a bulkier framework that already has javascript in it like bootstrap. I was thinking I would attach the w3.css style sheet to the wordpress theme because w3.css is so lightweight and simple and I have been really enjoying it. Then I started to think that the aspect that I utilize the most is the media queries for responsive design. Having css classes that resize or hide the content to display on desktop vs tablet vs mobile. So at that point I was wondering maybe the best bet is just to make my own framework? Because it will only include the classes needed for the site? For example I never use the colors that come packaged with the w3.css style sheet. Does that make sense or what is normal practice in my situation? Any advice would be great. I don’t really know if this is the best approach to what I want to do, but the end goal is a lightweight website that I hand build as much as possible to keep it fast and so I can understand the HTML/CSS better. Thank you.
  23. I am trying to copy form inputs from 3 address fields to corresponding duplicate fields in another section of my form. If I use the following script and html the process works perfectly. <input type="checkbox" id="copy" value="" name="copy" onclick="CopyAddress(this.form)"> <script> function CopyAddress(f) { if(f.copy.checked == true) { f.bstr.value = f.gstr.value; f.bsubcit.value = f.gsubcit.value; f.bstate.value = f.gstate.value; f.bpcode.value = f.gpcode.value; } else { f.bstr.value = ""; f.bsubcit.value = ""; f.bstate.value = ""; f.bpcode.value = "";} } <script> I would like to change the checkbox to a button like so: <input type="button" id="copy" value="Copy" name="copy" onclick="CopyAddress(this.form)"> However once I change to a button, the script will not run and I can't work out why. My limited understanding tells me the fault lies in line 2 of the JS, if(f.copy.checked == true). Can anyone tell me where I am going wrong please.
  24. I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at: https://rads-198409.appspot.com If you minimize the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined. Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content .html to point to the right files). Below are links to the code: Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
  25. It's been a long time since that PHP class in college, and the majority of my focus since graduating has been on HTML5 / CSS3 / JavaScript. I'm getting ready to go live with a new website. I have a contact form build with HTML5 and CSS3 with validation done with JavaScript. The only problem is, I'll need a PHP script to send the form via email. Is there a basic, easy to use script that someone could recommend? Also, is it possible that my web host (I'll possibly be going with Go Daddy) will make such a script available? I'm hoping to find something that's essentially plug and play. Thank you
×