We Keep Coding

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)

Display one object - after clicking another object in JavaScript/HTML [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 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.

How to implement something like inpage expansion [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
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.

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/