We Keep Coding

Does "display:none;" ignore div's position to the viewport?

On my website I have a slideToggle div that contains some images, very big. When this div opens, I need the images to slideIn one by one when entering the viewport.
With my code, the div opens, but then the images slide in all at the same time (as if they were a single block).
But if I remove "display: none;" from my slideToggle div and I leave it open as a starting point, the script works perfectly.
I was wondering if "display: none;" somehow ignores the div's position to the viewport.
This is the slideToggle script I am using (if it helps): https://jsfiddle.net/5efuhytm/

Instead of
display: none;
Use
visibility: hidden;
This is because display: none will remove the entire dom element from the document. Whereas visibility: hidden will just hide the dom element. In this case, if you don't want to change the viewport hide go with the visibility property.
Refer this for more details, https://stackoverflow.com/a/133064/7544289
Hope this helps!

Change the CSS remove display:none in #show-images:
/*Panel that slides open*/
#show-images
{
color: #FFF;
padding: 0;
width: 150px;
}
And add this code (because what you want to hide is just Image.)
#show-images img
{
display: none;
}
Change the JS adding #show-images img
$(function()
{
$("a#toggle").click(function()
{
$("#show-images img").slideToggle(800);
$("#toggle").toggleClass("fade");
return false;
});
});

Trying to fix height of element so it highlights correctly when hovered

Hey so I have a bunch of tabs made up of like this:
<li><h6>Tab1</h6></li>
<li><h6>Tab2</h6></li>
<li><h6>Tab3</h6></li>
<li><h6>Tab4</h6></li>
<li><h6>Tab5</h6></li>
<li><h6>Tab6</h6></li>
There are all horizontally aligned with display: table-cell;
The problem is that some of them have text that wraps onto a second line, and the hover state when I mouse over an item isn't going to the full height of the row.
You can see the table I'm refering to on this site here: http://perennial.chkpt.com.au/invest-with-us/

You can add :hover style on li instead of a.
Example: apply this style for the website you provided
li.ui-state-default.ui-corner-top:hover {
background: red;
}

Centering images and text in a div

I have been having some trouble centering some items on my website.
The items in question are in the passphrase generator (images and text elements in the dark box). I have tried the usual margin:auto, all the different display properties, text-align, align-self, align-content and align-items. None worked.
I was also wondering if anyone knew how we could get the text element under our images isntead of to the right, this is the code used for the generator.
All help is appreciated

A p tag is a block element, so the default width is 100%. This is why you have one element per line
#passphraseBilder {
text-align: center;
display: block;
}
#passphraseBilder p {
display: inline-block;
}
Turn the p tag into inline or inline-block, and it will work ;-)
Have a look to the difference between block and inline: https://www.w3schools.com/html/html_blocks.asp

Try this:
#passphraseBilder {
display:inline-block;
width:100%;
}
Note: I have just added the properties which you should add or overwrite. Existing properties has to be there.

CSS: Transition of horizontal scroll menu is not smooth

I would like to make the transition of the menu to be smooth. The problem is when you click the arrows, the 2nd div will show on the bottom of the 1st div, making it not smooth to look at. pls see below for my code:
Pls see my code here:
http://www.codeply.com/go/mdMPOkmFVH

in your code you need to do some basic change in CSS, your CSS should be as follows
.btn-arrow {
display: inline-block;
text-align: center;
}
.effects-list {
text-align: center;
}
.col-xs-4 {
min-height:20px;
}
Here you need to set minimum height 20px for class .col-xs-4, The reason behind this is the jquery function needs to set sliding element to have position absolute, and you were setting it to relative by force. and if all child elements in divs are absolute elements, then absolute elements won't acquire it's space in parent div and that is why it will make parent div's acquired content will be empty. so it will treat it as empty div and set it's height as 0px, and won't show anything in the div... so here we are specifying it's minimum height to solve our issue.
Another thing that we could have done is adding white space to the parent div
e.g.
<div class="col-xs-4" id="effects_menu"> </div>

Best way to create link inside td with onMouseOver function?

I have a table which includes a td with an onMouseOver function that changes the background color of the td. The text inside the td is a link. The problem I am having is that the link appears "highlighted" when the mouse hovers over the td, but can't be clicked on unless the mouse is hovering over the link itself. In other words, there is kind of a "buffer" zone around the link text but inside the boundaries of the td where the background color is changed but the cursor remains the standard pointer (and the link cannot be clicked). Is there a way to cause the entire td to be a link, or would I have to use two different images to get the desired effect?
Example code:
<table>
<tr>
<td onMouseOver="bgColChange();" style="background-color:#ffffff;">
Location 1
</td>
</tr>
</table>

You can do something like this:
<table>
<tr>
<td class="myTD0" onMouseOver="bgColChange();" style="background-color:red;cursor:pointer;" onClick="document.getElementById('myLink0').click();">
Location 1
</td>
</tr>
</table>
See I have added onClick on td with id of anchor tag
onclick="document.getElementById('myLink0').click();"
Demo Fiddle
I guess this is what you are looking for.

From what I understand, you want a TD element with a link inside of it and you want to:
change BG color when hovered
make entire TD element clickable for the link
The first thing to note is you're using inline JavaScript. That means you're placing raw JavaScript code inside your HTML. That is not a good practice or convention to follow. In the last several years the JavaScript community has stepped away from inline JavaScript.
Instead, the better approach is called "unobtrusive JavaScript" which is a fancy name that means you give your HTML elements class/ID names that you can reference in your JavaScript and CSS files.
This Wikipedia Article on Unobtrusive JavaScript is pretty good at showing what the differences are. The takeaway is that unobtrusive JavaScript is the preferred practice and should be used as much as possible.
I know there are unique situations where inline JS is still necessary, but you're particular problem doesn't need any JavaScript. You simply need to use some specific CSS. Often times the best solution is the simplest.
# HTMl file
# ----------------------------------------
<table class="custom">
<tr>
<td>
Location 1
</td>
</tr>
</table>
# CSS file
# # ----------------------------------------
.custom {
width: 100%;
}
/* Give TD element padding so you can see that link expands properly */
.custom td {
border: 1px solid black; /* For visual aid */
padding: 10px;
}
/* Change background color on hover of TD element */
.custom td:hover {
background: #ccc;
}
/* Change link color when hovering over TD element */
.custom td:hover a {
color: #fff;
}
/* Make link expand to entire TD element (its parent) */
.custom td a {
display: block;
text-decoration: none;
}
Here is a JS Fiddle example that works without using any JavaScript.
This solution is preferred because it does not use JavaScript and is much easier to understand as another developer.
You only need to add a custom class to your TABLE element so that you can attach CSS styles to it. I've added several comments in the JS Fiddle so be sure to check them out. You can also play with the JS Fiddle example to help you understand it further.