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


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 833 results

  1. 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!
  2. Hi Am working on nested tabs, but level 1 tabs work fine but all the level 2 tabs displays data at once. I have attached a source code . For example, with attached code when i click on London->open Collapsible That time internal 3 tabs data in "open collapsible" are visible at once. How can i hide it? Please suggest Thanks and Regards Rizwan Syed test.txt
  3. Hello Guys, I'm working on a website for my aunt, due to the new privacy law, she needs to update the page with a new Button in the menu. I lost the programm which I created the old .png buttons, so I can't create the new one in the same style. I want to replace the old buttons with new ones, written in css. The only problem is the size of the buttons, they keep scaling with the writting in the button, but I want them all the same size. I attached the code of the css and html, can you help me? I know, the website is written in an old style, her former programmer did all the writting and I overtook the project a while ago. CSS.css Schwarzwaldverein Ortsgruppe Achern.html
  4. Greetings to all the users and administrators of w3scools invisionzone forum. I would love to get some constructive criticism on this web development tutorial site namely webtrickshome. It's been around for slightly more than a year but I redesigned it recently. Any feedback regarding the design and contents would be highly appreciated. Thankyou
  5. Hi all ! I wrote this short code : <html> <head> <style> table, th{ max-width: 600px; } .e2 { width: 200px; } </style> </head> <div style="background-color:TRANSPARENT;width:603px"> <body> <table> <tr bgcolor="TRANSPARENT" height="20"> <td class="e2" style="background-color:GREEN"></td> </tr> </table> </body> </div> </html> I have a data base column (in oracle apex), And I would like to have something like that (a multiplication) : .e2 { width = #column# * 600; } Because I would like to have a green horizontal bar chart with different size depending on the values in my database column. So, I tried calc() : did not work... And I also tried : <td style="background-color:GREEN" width=#column#*600></td> <td style="background-color:GREEN" width=calc(#column#*600)></td> Those 2 lines did not work too.. Do you have any idea how to do this multiplication please ? Best regards, acnos
  6. Hi everyone, I'm trying to have little blur on background which is video. I added filer:blur(5px) on this video, but it won't work. Is there any way to make it work? I searched in google to see some code in, but none of them are working. Can anyone help? Thanks, Gary Taylor
  7. Hello, I am currently in the middle of creating a web comic aggregation website. So far, I have written a PHP-based RSS reader that grabs the image source links and publication dates for various web comics from their RSS feeds, and uses this to update a MySQL database. This RSS reader/database updater is configured to run once every several hours and update the database with any new comics it finds. It seems to be working fine, and now I am starting to work on the front end of the website, which needs to grab this information from the ever-growing database, and display it in a user-friendly and interactive format. I wrote the database updater in a fairly procedural way, because it didn't strike me as something that lent itself very much to object-oriented development. However, the front end of the website does strike me as something that I can save myself a lot of time on by coming up with a decent object oriented design first. Unfortunately, I don't have a lot of experience in this, so I thought I would look online for suggestions. So far, I have decided specifically what I would like the front end to do, and have come up with 2 possible approaches to designing it, but am unsure about both. Here's what I would like it to do: (To clarify, when I say the phrase "comic strip," I'm referring to a whole strip like XKCD, Dilbert, the far side, etc., and when I say the phrase "comic," it refers to an individual comic within a comic strip, i.e. the Dilbert comic for 8/30/2016). I would like my webpage, by default, to display a vertically stacked list of the latest comic images from each comic strip in the database. For customization, I want a comic strip control panel, which allows users to decide which comic strips are enabled/disabled, and in what order they are displayed. I would like each comic image to appear between text denoting the name/author of the strip and an individual set of buttons that allows the user to go forward and backward through the archived comics, and also to adjust the size/scaling of the image. Finally, I would like a similar but generalized set of buttons that allows the user to control all the comic strips in the same fashion, but at once. Based on my basic understanding of object oriented programming, and the design approach suggested in this stack overflow answer: http://stackoverflow.com/questions/1100819/how-do-you-design-object-oriented-projects, I came up with one possible design: Two classes: 1) a comic strip class that contains attributes like the comic strip's name, ID number (from my database), enabled/disabled status, and current comic to display (an object of the next class), in addition to functions to get and set each of these variables, 2) a comic class that contains attributes like the image source link, publication date, and scaling percentage, in addition to functions to get and set each of these variables Then the main webpage would contain a comic strip control panel and general comic control panel as described in the desired functionality. In addition, it would contain an array of individual comic control panels, and an array of div tags (or a similar tag), which would be displayed vertically stacked and alternating along with the comic strip names in plain text. Finally, there would be functions for updating comic and comic strip object information from the database, and functions for updating the div tag content for comic display based on the comic object information. All the functions would be called using JavaScript/Ajax from the appropriate buttons. However, I was unsure about this design, so I asked a friend, who suggested that I use a model-view-controller design pattern, which I guess is popular in web development because its potential for separating all the various languages. After reading about this online, I have come up with a possible alternative design: Model: PHP, an array of comic strips, including name and ID number, active/inactive status, and current comic image URL/publishing date View: PHP generated HTML/CSS, as described before, a comic strip control panel for enabling/disabling and ordering, a vertically stacked list of comic strip names, constituent comic images, and individual control buttons, and a general set of buttons for controlling all enabled comics at once Controller: PHP/MySQL, a function to update order and active/inactive comic strip status, a function to update a given comic strip's current comic information, and a function to update all comic strips' current comic information at once As I understand it, the controller functions would be called upon user input into the view (clicking the buttons), which would then update the information stored in the model, and then somehow that would trigger a refresh of the view based on the new model information. I am worried I may have missed something in each of these designs (especially the first one), and unsure about the potential merits of one versus another. I was also wondering if it might be possible to combine the two somehow. Does anyone have any suggestions? Help would be much appreciated
  8. Hi! I need some help with an exercise I am doing. In my exercise, the borders on the right side is taking too much space, I would like it to take only as much space as it needs, with only around 2em of padding, but for some reason, the left side and the upper side seems to have a lot of space....I would appreciate a lot if you could help me. Attached you can find the file and here is a link with the exercise I am doing (the first one). Exercises Thank you! Ejercicio1prueba.htm
  9. I am creating a re-usable email template. I am not sure if this can be done but wanted to throw it out there and see if anyone had any ideas. I have a button with a link to a form. The link pre-fills fields in the form with merge tags in the url. I need to make/create a "placeholder" for one of the tags so that I can edit/insert different values as needed. Is this possible with HTML? This all resides in PARDOT, which does have a WYSIWYG editor. When I click on the lick I can pull up the WYSIWIG and change attributes etc. I would love to be able to click the link and have an "Event ID" that would change the portion of the link containing "Event ID" to what I need so that when clicked it pre-fills the field on the form with the correct "Event ID". Everything works fine, I am just trying to find a way to make it easier for the end user when utilizing the template. Hopefully this isn't too vague and I have illustrated what I am trying to do. Thanks!
  10. juan.rojas89

    Block Size

    I have been using the <block-size: XX%;> property to prevent a table from resizing on different screens but I can't seem to get it right, what could I use to solve this? this is an example of how I'm applying the code: HTML <div .div-central> <tr>example1</tr> <tr>example2</tr> <tr>example3</tr> </div> Css .div-central { block-size: 60%; }
  11. Hello I have a problem when it comes to traversing through DOM nodes and accessing their data(values). Please have a look at the following code HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="js.js"></script> </head> <body> <div id="div1" class="div1"> <img src="1.png" style="width:100px;height:100px;"/> <h1>This is a Heading1</h1> <p>This is a paragraph1.</p> <button onclick="a(0);">Press me</button> </div> <div id="div1" class="div1"> <img src="2.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading2</h1> <p>This is a paragraph2.</p> <button onclick="a(1);">Press me</button> </div> <div id="div1" class="div1"> <img src="3.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading3</h1> <p>This is a paragraph3.</p> <button onclick="a(2);">Press me</button> </div> </body> </html> JAVASCRIPT var elements = document.getElementsByClassName("div1"); function a(index) { var d = elements[index].childNodes[3].nodeValue; alert(d); } Okay so according to my understanding if I want to access and alert the first div's h1 text value which is "This is Heading1" then my JavaScript code should be var d = elements[index].childNodes[1].nodeValue; However I do not get the text value? Also nodeValue gives me NULL if I use innerHTML I get the text value but at childNodes[3] and not childNodes[1] where you'd expect it to be? Also this example contradicts everything you find at https://www.w3schools.com/js/js_htmldom_navigation.asp Can someone please elaborate on this as it is very important to understand and I am tearing my hair out trying to figure this out.
  12. 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?
  13. 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>
  14. 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
  15. 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.
  16. 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!
  17. 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
  18. 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!
  19. 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>
  20. 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
  21. How i make a Real time comment-replay script system in a website ?
  22. 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;} }
  23. 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
  24. 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
  25. 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.
  • Create New...