Jump to content

uworlds

Members
  • Posts

    21
  • Joined

  • Last visited

Everything posted by uworlds

  1. Thanks so much for your reply again! Yes I can imagine it’s not a short answer. I’ll do some research on what you said thank you.
  2. Hello, I would be very appreciative for any advice. I want to create a container on a Web page which inserts a clickable image to a variable URL, depending on the country the visitor is from. For example if a visitor is from China then the container imports a specific image with clickable URL from a repository of images and associated URLs. A random selection is fine, but for now I just want to get it working with a single clickable image. rhsnk you !
  3. Hello Ingolme, Thanks so much again! You really helped me and I really appreciate it. What did in the end was use a listener to detect when the page had finished loading, and this worked: <script> window.addEventListener("load", updateButton); function updateButton() { $("button").last()[0].style.setProperty("background","white","important"); } </script> Many thanks!
  4. Hi there! I tried the above, but I have been getting errors about nulls in Chrome Developer Tools, but I must be putting something in the wrong place, are you able to correct me? After trying a whole range of options, I ended up putting this in, but am still getting those errors: <script> function changeColor() { var button = document.body.lastElementChild.querySelector("button"); button.style.background = "#FFF!important"; button.style.color = "#000!important"; } changeColor() </script> Any advice would be hugely appreciated. Kind regards
  5. Thanks so much! I will give that a try and get back to you, it sounds perfect. Thank you!
  6. Hello, I would be very grateful for any help with this. Javascript is run on a page which grabs this code from remote and inserts it at the very bottom of the page (see attachment if necessary): How can I change attributes in the highlighted line, for example override the background value of #000 to be #FFF (especially because I am also not sure how to make any extra code execute after the above code since it's forced to the bottom of the page and not sure how that works). I have tried a number of approaches from other online forums but have not had success yet. Thanks so much for any advice you may have! Kind regards
  7. Thank you so much for your time to write back and include those links! Kind regards
  8. Thank you so much for this, I really appreciate it! May I please ask you as well, if the subdomain is on a different IP address than the main domain (I can't get around that), will that still make the cookie available to all subdomains seen in the browser, or do I need to create a different cookie for each subdomain that has a unique IP address? Kind regards
  9. Hello, How may I use the <picture> tag to change the sizing of a (background or other) image depending on the device size? For example, let's say the current CSS is: .bgimg { background-position: center; background-size: cover; background-image: url("img/large.jpg"); min-height: 75%; } So rather than using the W3C code of: <!-- Header with image --> <header class="bgimg w3-display-container w3-grayscale-min" id="home"> Instead it would look something like this: <!-- Header with image --> <header id="home" class="w3-display-container w3-grayscale-min"> <div> <picture> <source media="(min-width: 1501px)" background-image="img/large.jpg" style="background-position:center, width:2000px;"> <source media="(min-width: 601px)" background-image="img/medium.jpg" style="width:1500px"> <img background-image="img/small.jpg" alt="picture" style="width:600px"> </picture> </div> Ultimately, my goal is this: 1. to specify the width and height for each image 2. have the picture change depending on the device size 3. have the image also cover the available container size to 100% width Any help would be hugely appreciated. Kind regards
  10. Hello, How may I take the contents of a cookie and append it to a URL so it is passed to the next page? The reason is so that its contents are available so a cookie can be made from it (that code already works on the site). Also, if the page sent to has a URL forward to a different page, can the query string still survive and go all the way to the final destination page? Kind regards
  11. Hello, Is it possible at all that when a cookie is created, either on a subdomain or domain, that it places a copy of it on all other subdomains, compared to passing a query string from page to page with a view to achieving the same? Kind regards
  12. Thanks so much dsonesuk! I believe this allowed me to remove all the specific style variables and consolidate all into custom.css. It seems on the site I am trying to change that there are tweaks being made to the W3C template that I started with (https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_travel2&stacked=h used to seed https://chinahotel.directory/) where it's adding and subtracting 8 and 16 px for various images on the bottom half of the screen which is preventing me from knowing if the image placements are fully working or if this addition or subtraction of the 8 and 16 px needs to be deleted. I did a lot of trial and error getting rid of it and changing, but nothing yet seems to have worked. If anything blatantly wrong that I have done jumps out I'd be very grateful for your advice. Best regards
  13. Thank you so much! Because the CSS is stored externally in an URL, what would you say is be the best way to implement this? For example, should I add this CSS code at the top of my HTML page ... or, should I somehow incorporate the same meaning into something like a style variable next to each image? like: style="overflow: hidden; max-width: 100%; max-height: 100%; height: 100%; width: 100%; object-fit: cover;" (I guess that may be messes the code up quite a bit so perhaps first option better?)
  14. Thank you so much for these suggestions. Strangely I seem to be having trouble making it work on this W3C template: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_hotel&stacked=h In this particular section (with the 5 images): <div class="w3-row-padding w3-padding-16 w3-text-white w3-large"> <div class="w3-half w3-margin-bottom"> <div class="w3-display-container"> <img src="/w3images/cinqueterre.jpg" alt="Cinque Terre" style="width:100%"> <span class="w3-display-bottomleft w3-padding">Cinque Terre</span> </div> </div> <div class="w3-half"> <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3-half w3-margin-bottom"> <div class="w3-display-container"> <img src="/w3images/newyork2.jpg" alt="New York" style="width:100%"> <span class="w3-display-bottomleft w3-padding">New York</span> </div> </div> <div class="w3-half w3-margin-bottom"> <div class="w3-display-container"> <img src="/w3images/sanfran.jpg" alt="San Francisco" style="width:100%"> <span class="w3-display-bottomleft w3-padding">San Francisco</span> </div> </div> </div> <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3-half w3-margin-bottom"> <div class="w3-display-container"> <img src="/w3images/pisa.jpg" alt="Pisa" style="width:100%"> <span class="w3-display-bottomleft w3-padding">Pisa</span> </div> </div> <div class="w3-half w3-margin-bottom"> <div class="w3-display-container"> <img src="/w3images/paris.jpg" alt="Paris" style="width:100%"> <span class="w3-display-bottomleft w3-padding">Paris</span> </div> </div> </div> </div> </div> If all 5 images for the above grid are different sizes, how may I implement the "object-fit:cover"? I have tried adding it to the style variable in these ways: style="width:100%; object-fit:cover;" style="width:100%; height:100%; object-fit:cover;" style="object-fit:cover;" ... but I can't seem to keep the images to stay within their boxes. Any advice would be hugely appreciated, thank you!
  15. Hello, I would like to be able to insert images of varying width and height into a fixed width and height container on a page such that if they are wider or taller than this container then the over-sized part of the image is simply truncated, without any stretching, but also so that the image fills the full container without leaving any white space ... in other words it will drag the image over the border of width to fill height, or over the border of height to fill width. In other words, the image is placed in the top left corner but fills the entire space without being stretched. So enlarging by proportion and allowing one dimension to stretch over, but the smaller dimension goes to 100% only. This, as opposed to resizing an image to squeeze within a container making the image stretch to fit. Any help would be greatly appreciated! Kind regards, Mike
  16. Hi Hema, Ah thank you so much! This is EXACTLY what I was looking for. I really appreciate your time, helpfulness and speed of response to help me today. Thank you. Kind regards, Mike
  17. Hello everyone, I would be very appreciative to understand how to use the W3C Schools Template so that I can have multiple stored images served depending on the device width. In other words rather than uploading just one image and letting the template resize it going from a widescreen to mobile size, I'd like some control with regards to the centering of each image. Also, I can then optimise the image sizes too to be radically smaller for mobile (do the W3C Schools Templates automatically optimise image size for me, for example a wide screen image may be hard to reduce to under 200 KB to retain quality versus some images on mobile coudl easily be fine at 30 KB). Thanks so much for your help! Kind regards, Mike
  18. I would like to be able to place a search form, which is stored within <script>https://website.com/folder/folder2</script>, to sit on top of an image like the one of London on this page https://www.w3schools.com/w3css/tryw3css_templates_travel2.htm Any help would be immensely appreciated.
  19. Hello, I was wondering if anyone out there would like to do a paid job? Ultimately I would like to hire someone to take one of the templates found at https://www.w3schools.com/w3css/w3css_templates.asp and customise it to change the main picture and fill content in for some of the sections. It is to be a 1-page site only, just a landing page, with some javascript included for a sign-up form (code will be supplied). Look forward to anyone who would be available to do this? Kind regards, MC P.S. I really hope it's ok to post this, I can't find anything in the guidelines to say to not so hope ok. Sorry if not!
  20. Hello there, I was hoping someone could help me shed some light. I seem to unable to centre the text and Orange button on the page http://absolutehappinessbook.review ... but only in all the instances below the heading "Chapters and Contents". It looks mostly centred; however, if you view it on a small iPhone then you can see that it is skewed more to the right, and I am looking for pixel perfection centering. If anyone can see the error of my ways I would greatly appreciate. Kind regards
  21. Hi folks, Is it possible to place the entire header on page www.uworlds.net into a CSS? In other words, include (1) the image banner (2) the AddThis share code at the very top which contains javascript and (3) the text at top right? Or can javascript simply not be included in CSS and maybe this could be achieved through an include somehow? Any advice will be greatly appreciated. Kind regards,uworlds
×
×
  • Create New...