We Keep Coding

Do not load the Division if using JS [closed]

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.

How can I test my html code part by part automatically? [closed]

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)

CSS isn't working in any browser unless I use inline styles [closed]

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.

Whats the best way to fix HTML Layout problems? [closed]

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.

What are the best jQuery practices to use the same effect on different divs [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have a chat support fixed on the left of my browser, I want to show and hide it using jQuery, I already did it by using the show() and hide() function but, when I want to apply the same jQuery effect on subsequent layers it does nothing, it just applies to the first element, what I want to ask is:
What is the best way to do this, I'm learning jQuery and have done some little things with this library but I can't figure how to do this without just copy and paste the same effect, should I use a "for" method?.
I leave my code below with a JS Fiddle example so you guys can figure out what's going on:
HTML Markup:
<div id="support_left">
<div id="support_show">
<figure id="show_control">
<img src="../img/chat.png" alt="Chat" />
</figure>
<div id="show_item">
<p class="support_cyan">Chat with sales <span class="close">X</span></p>
</div>
</div>
<div id="support_show">
<figure id="show_control">
<img src="../img/call.png" alt="Call" />
</figure>
<div id="show_item">
<p class="support_orange">Chat with sales <span class="close">X</span></p>
</div>
</div>
<div id="support_show">
<figure id="show_control">
<img src="../img/mail.png" alt="Email" />
</figure>
<div id="show_item">
<p class="support_green">Chat with sales <span class="close">X</span></p>
</div>
</div>
</div>
Javascript:
$('#show_item').hide();
$('#show_control').click(function(){
$('#show_item').show();
});
$('.close').click(function(){
$('#show_item').hide();
});
Link to the JS Fiddle:
http://jsfiddle.net/45hsd6dp/
Thanks in advance.

First of all, change all your IDs to classes. IDs must be unique and how jQuery handles multiple instances of IDs is up to how individual browser/vendor decides to do with it. The behaviour is technically undefined and the browser will only select the first occurence, usually.
You will need to give your show and hide functions a context when the click event is fired. With your current script, you are telling jQuery that:
Whenever a click event is registered for any elements with the class .show_control, show ALL items that has the class .show_item.
See that there is no context in your function that is bound to the click event.
To give your event listening a context, always use $(this), which restricts the function to elements of interest:
$('.show_item').hide();
$('.show_control').click(function(){
$(this).next('.show_item').show();
});
$('.close').click(function(){
$(this).parent('.show_item').hide();
});
In layman's words, the function tells jQuery:
When .show_control is clicked it, search for it's immediate, next sibling that has the class of .show_item, and show it.
See that the statement has context, because $(this) restricts jQuery to the context of the element being clicked on. Depending on your markup, you will have to rely on various jQuery methods to transverse the DOM, such as .next(), .prev(), .parent(), .parents(), .find(), .children(), .siblings() and etc. All these functions are well-documented on the jQuery API, make sure you check that out.
See fiddle here: http://jsfiddle.net/teddyrised/45hsd6dp/6/