Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a site where I'm trying to modify a chat applet (a javascript applet loaded from off-site). I'm positioning a graphic over part of it and adding some code to expand it when I'm not online/available (it will show a form, and I want the whole form to be visible).
Everything works fine, except that the positioning will fail on either Chrome or Firefox. When I fix one, it breaks the other. I'm thinking of using browser detection to fix it, but the positioning I'm using is pretty simple. I'm wondering if one browser or the other isn't following a standard, or am I doing something wrong? Basically, the image I'm putting over the applet is taking up space on the page and pushing the chat applet down in some instances and not in others.
Mobile and Desktop support required (currently displays the same on each). Page in question is too big to post here but I'll give a link so you can view the source (currently has hacks to display correctly on Firefox, and Chrome shows a large gap). https://eddon.systems/joomla/index.php/contact-evan
Here's the code in question:
<div id="chat-height" style="height: 24em;">
<div id="ed" class="pull-right" style="z-index: 1000006; position:relative; right: 0; top: -3em;">
<img src="/img/grasshopper.png" />
</div>
<div id='tawk_55b4804ed05623730af6f54a' style="position: relative; top: 0em;"></div>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var $_Tawk_API={embedded:'tawk_55b4804ed05623730af6f54a'},$_Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/55b4804ed05623730af6f54a/19r4labog';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);})();
$_Tawk_API.onStatusChange = function(status){
if (status === 'offline'){
document.getElementById('chat-height').style.height="38em";
document.getElementById('tawkchat-maximized-iframe-element').style.height="38em";
document.getElementsByClassName("contact-mobile")[0].style.visibility="visible";
} else {
document.getElementById('chat-height').style.height="24em";
document.getElementById('tawkchat-maximized-iframe-element').style.height="23.5em";
document.getElementsByClassName("contact-mobile")[0].style.visibility="hidden";
}
}
</script>
<!--End of Tawk.to Script-->
</div>
I think your problem is with this element: <div id="ed">. It is a <div> with position:relative;, meaning it will display block and any element after it will be put on a new line, which is what is creating the gap.
To fix it try updating your style for the wrapping div by adding a position:relative; like this:
#chat-height{
position:relative;
}
Then change the style of your <div id="ed"> to position:absolute; in order to position it absolutely to your wrapping div.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I am trying NOT to load the Division using JS, but it loads and then remove the content.
I do not want it, tried remove() and hide() both working like hiding it after loading.
$(document).ready(function() {
if ($(window).width() <= 700) {
$('.desktop-only').remove();
} else {
$('.mobile-only').remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desktop-only">
<a class="GAds" href="https://ads.google.com">
<img height="80" width="80" class="img-ads" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<div class="ads">
Mobile Google Ads
</div>
</a>
</div>
<div class="mobile-only">
<a class="GAds" href="https://ads.google.com">
<img height="80" width="80" class="img-ads" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<div class="ads">
Desktop Google Ads
</div>
</a>
</div>
In order to .remove() an object it first needs to be loaded into the DOM and recognizable. Elements are viewable as the page is loading. However, $(document).ready() never fires until the page is done loading. Hence why you can see both for a few seconds before the page is done loading.
You have two main options here:
Option 1
The first one is to set both of the ads to be hidden style="display: hidden;" and then remove the hidden tag once the page is loaded: $('.class').css('display','');.
Option 2
Or, since both "ad types" only have one single element which is different between the two. You can have one, empty, element loaded in and append the data you want to it once the page loads. This one takes a bit more work.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ad-container">
</div>
JS
$(document).ready(function() {
var adTypeName = "";
if ($(window).width() <= 700) {
adTypeName = "Desktop Google Ads";
} else {
adTypeName = "Mobile Google Ads";
}
$('.ad-container').html('\
<a class="GAds" href="https://ads.google.com">\
<img height="80" width="80" class="img-ads" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">\
<div class="ads">\
'+adTypeName+'\
</div>\
</a>');
});
Essentually we are just taking out code block and depending on the screen size we are saying whether it's "Desktop Google Ads" or "Mobile Google Ads". Then we insert the entire code block into the div element called .ad-container.
You would most likely want to use Option 1 however I figured I'd provide option 2 in-case for some reason you would need that instead? But I would only choose 2 over 1 if I had a very specific reason for doing so.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a long HTML file with a lot of functionalities to show and hide it.
For example, users can hide the logo, show a large title, show some blocks and all these cases can be used by various pairs.
I can have lots of these cases. I need something to test all cases (show or hide some blocks, combine some of them, etc.) without commenting on parts of my code.
By the way, the structure of the code can be changed after some variations, that's what I am trying to test.
AS it is shown in this picture, in one case it can have logo, address, contact info, and in another case it can be blank.
How can i test my web
Here are a few ways you could acomplish that.
I'm using jQuery because it's on your question's tags, but you can do this with vanilla js as well.
$(document).ready(function() {
$('.toggle-logo').click(function() {
$('.logo').toggle()
})
$('.toggle-title').click(function() {
$('.title').toggleClass('transparent')
})
$('.toggle-text').click(function() {
$('.text').fadeToggle()
})
$('.toggle-section').click(function() {
$('.section').slideToggle()
})
})
.transparent {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="logo"><img src="https://dummyimage.com/60x40/cccccc/000000?text=Logo" alt="My logo"></h1>
<h2 class="title">My heading</h2>
<p class="text">My site text</p>
<div class="section">
<p>Section</p>
</div>
<div>
<button type="button" class="toggle-logo">Toggle logo (remove space)</button>
</div>
<div>
<button type="button" class="toggle-title">Toggle title (keep space)</button>
</div>
<div>
<button type="button" class="toggle-text">Toggle text (fade and remove space)</button>
</div>
<div>
<button type="button" class="toggle-section">Toggle section (slide and remove space)</button>
</div>
there is html validator but to hear you it is sort of dynamic code so won't be so helpful, i think the only way is to try it yourself, or put it in production mode and let people reporting you the problems they find while using it... (beta page)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've got a very amateur question since I am very new to coding!
I have 4 button inputs "skolefag", ""sport", "fritid", "diverse" and 4 large squares (stacked upon eachother, different colors, but you can only see the red one)
I want to switch between divs (the large squares) when i click on the different categories, so that the contents and background color of the correct/matching large square shows.
What would be the easiest technique to achieve this trough?
Sorry again and thank you in advance!
You need to use onclick attribute on you button or add a click eventListenner to it.
Then you create a function that is called by onclick="myfunction(idButton)" or by your eventListener :
function myfunction(idButton) {
document.getElementById("my-elmt-to-set-up").backgroundColor = docuement.getElementById(idbutton).backgroundColor
}
and same thing for color properties, review javascript lesson I think --> after lesson you can make some incredible interactions
Here is one solution (which I think is neat):
document.addEventListener("DOMContentLoaded", function() {
change_menu("home");
});
function change_menu(
menu_to_show
) {
['home', 'second', 'third'].forEach(function(memuee) {
document.getElementById(memuee).style.display = 'none';
});
document.getElementById(menu_to_show).style.display = 'block';
}
<div style='display: flex;font-size: 200%;'>
<div>
<div style="background:green" onclick="change_menu('home')">Home</div>
<div style="background:red" onclick="change_menu('second')">Go To Second</div>
<div style="background:blue" onclick="change_menu('third')">Go To Third</div>
</div>
<div id="home" style="background:green">
HOME PAGE
</div>
<div id="second" style="background:red">
SECOND PAGE
</div>
<div id="third" style="background:blue">
THIRD PAGE
</div>
</div>
Of course this could be further optimized by referencing "page" divs by the "button" div's ids (e.g. home_page from home_button) or grouping ids within given "wrapper" divs, using classes, etc., but I think this is the essential solution.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have this problem with any div id or when trying to select an element within a class (CSS example: .className li{} ), so I can only assume that I’m doing something wrong. The inline styles work, but if I try to add them to my stylesheet, they won’t show up.
I can see the CSS styles in mobile view, but it’s not working in any browser on my computer.
I’m pretty sure my CSS files are linked properly because the navigation menu is working fine… However, my .js file isn’t working for the page content or the footer. Basically, the header is the only thing that is fully functional and styled.
Example:
Trying to change the background color of the footer:
HTML:
<div id=“footer”>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>TEXT HERE</p>
</div>
</div>
</div>
</div>
CSS:
#footer {
background-color: black;
}
If I do this in HTML it will work:
<div id="footer" style="background-color: black;">
You're using ““ formatted quotes which is wrong. Please use double quotes "" around ID like this
<div id="footer">
#footer {
background-color: black;
}
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>TEXT HERE</p>
</div>
</div>
</div>
</div>
Not sure what your development environment looks like, but if you're working on a live site, you might want to double check that your browser caching isn't loading a non-updated version of the CSS to the browser - Either through htaccess or through your hosting accounts admin area (cPanel, etc).
The obvious quick check for this is to clear your browser cache and see if the updates you've made are rendering.
Since you say that it is only the footer section of the page that you are having a problem with and if your actual code is what you've shown here, then the issue is likely that you are using formatted (smart) quotes around the id="footer" instead of unformatted (straight) quotes:
<div id=“footer”>
Also, make sure that you have saved your file with a standard character encoding (UTF-8 is most common) and add the following tag to your head section to declare that encoding to the user agent:
<meta charset="utf-8">
You can read up on character encoding here.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
currently I'm facing with a web-page design problem.
I'm trying to implement a function like Google Image Search. When I click on one image at Google Image Search, there will be a subpage show below the image I clicked.
I don't know how to describe or call this subpage. Is there anyone could tell me how to implement this or what kind of technology it is.
Here's the picture. (What Google did)
http://www.wy19900814fun.com/thumbnails/test.png
<html>
<head>
<style>
.container {
text-align: center;
}
.container img {
display:inline-block;
}
.subpage {
display:none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div class="subpage">
<p>This is </br>just</br> a test.</br> Please show</br> subpage</p>
</div>
</body>
</html>
And here's my code. Is there anyone could change my code to show a subpage that containing the information of second div. And show it below the image you click.
To achieve this you're gonna need:
Knowledge of/learning HTML basis
Knowledge of/learning javascript basis
Knowledge of/learning AJAX basis
Knowledge of/learning any server-side language
Probably (and desired) MySQL or some DB language.
Basic steps for implementing it
Generate your HTML with every image
Use javascript to bind click event to every image
Use AJAX to make a request to your server
Use your server-side language (and desired DB) to get the image data (title, info, external-link, or whatever)
Parse the response using JS and manipulate the DOM to add and show the new data.
Recommended resources
For learning: jQuery Learning Center
For reference: Mozilla MDN
Hope this help you out for a kickoff. Have good coding.