We Keep Coding

why will jquery not put results in div with background color set

I have a menu containing onclick calls. Then my js script catches the data and sends it to a php script for processing and returns it back to my js script which is supposed to place the results into the defined document element. Simple enough, right.
For some reason though, if I set the background color in my css the results will not show. Here are the relevant parts of my code. Can someone point out to me if there is a flaw in my code; and if not, why does this behavior happen and is there a work around.
My css...
.decade { margin-left: 150px; padding: 20px; color: green; }
.slaby { position: fixed; left: 200px; bottom: 86px; top: 50px; right:50px; color: black; padding: 20px; background-color: #ddd; border: 2px solid grey; }
My html...
<div class='tln'>
<span class='point' onclick='mes(this)' go='a' >The 70's</span>
<span class='point' onclick='mes(this)' go='b' >The 80's</span>
</div>
<div id='decade' class='decade'>
<div id='slab' class='slaby'></div>
</div>
My js...
function mes(span) {
var clam = span.getAttribute('go'); var shot = 1;
$.ajax({ url:'', type:'POST',
data:{ page: clam, shoot: shot, },
success: function(snowy){
$('#slab').html(snowy);
$('#decade').html(snowy);}});}
In my js script I am placing the results in both 'slab' and 'decade' elements just for testing purposes. Now with my css the way that it is, div(decade) is showing the results, while div(slab) is still blank.
For some reason: if I remove the background color from the div(slab) The results show here; if I add a background color to the div(decade) the results still show here.
I'm looking for a way to display the results in div(slab); as well as, having css style div(slab)'s background color. Thank you all for any help and have a great day.

Some of the other comments pointed out that #slab is "inside" of #decade so when you are doing $('#decade).html() you are replacing/removing #slab.
Use
$('#decade').append()
instead or alternatively
$('#decade').prepend()

(SOLVED) why will jquery not put results in div with background color set.
I am not sure why the query contents were not being displayed, but changing the style for div(slab) with a z-index provided the results I was looking for.
I set the z-index for div(slab) to z-index: -1; and 'voila', works perfect.
.slaby { position: fixed; left: 200px; bottom: 86px; top: 50px; right:50px; color: black; padding: 20px; z-index: -1; background-color: #ddd; border: 2px solid grey; }
I have no idea why this works because no other element inside or outside of it has a z-index set.
Thank you all for your input and effort. I hope this solution helps somebody.

clickable figcaption link on top of image Wordpress

I'm helping a friend setting up a Wordpress page and I have an issue that I can't figure out how to fix.
I have added some image widgets to the sidebar that links to different categories on the site. The problem is that the image text should be on top of the image in a semi transparent box, and this box is not a clickable link. Is it possible to add the same link to the box?
The widget generates an HTML structure like shown in the example below and I have added some CSS to show how the semi transparent text box looks like.
figcaption {
position: relative;
height: 80px;
width: 300px;
background: white;
top: -235px;
left: 85px;
padding-top: 60px;
text-align:center;
opacity: 0.8;
font-weight: bold;
font-size: 140%
}
<figure>
<a href="some link">
<img src="http://static.highsnobiety.com/wp-content/uploads/2016/09/07200609/super-mario-run-iphone-7-01-480x320.jpg">
</a>
<figcaption>Super Mario</figcaption>
</figure>

Appearance > Customise > Additional CSS
figcaption
{
cursor: pointer;
pointer-events: none;
}

If you can't change the html, you'll have to use javascript/jquery to achieve this. In the WordPress widget manager, create a new plain text widget and paste this in:
<script>
jQuery(function($){
var $sidebar = $('.sidebar'); // change this selector to target your sidebar
$sidebar.find('figcaption').on('click',function(e){
e.preventDefault();
$(this).parents('figure').eq(0).find('a').click();
});
</script>
Or, to prevent Wordpress from adding <p> put it all on one line:
<script>jQuery(function($){var $sidebar = $('.sidebar'); $sidebar.find('figcaption').on('click',function(e){e.preventDefault();$(this).parents('figure').eq(0).find('a').click();});</script>

How to position loading animation inside input box?

I want to position my loading animation on the same line, inside my input box, to the right.
I tried :
<span>
<input id="searchbox" placeholder="Enter Catalog # " type="text" />
<img style="float:right;" id='loading' width="100px" src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/>
</span>
I get :
I couldn't get it to show inside my input box. :(

You can also do it as a background image in CSS. Just create a CSS class and apply at the time of loading the data. After Ajax call is completed remove the "loading" CSS class from the text input box.
.loading {
background-color: #ffffff;
background-image: url("http://loadinggif.com/images/image-selection/3.gif");
background-size: 25px 25px;
background-position:right center;
background-repeat: no-repeat;
}
You can view it here: http://jsfiddle.net/tejsoft/7pzgtevv/4/

I agree with #Sam in that it could be the background of the element, and all you'd have to toggle would be a class. If you set it up like:
input {
box-sizing: border-box;
border: 1px solid #ccc;
height: 30px;
padding: 10px;
}
input.loading {
background: url(http://www.xiconeditor.com/image/icons/loading.gif) no-repeat right center;
}
And then you can toggle the class as you're making your ajax call like:
$(document).on('blur', 'input', function(e) {
var $t = $(e.currentTarget);
$t.addClass('loading');
$.ajax({
url: $t.data('ajax'),
success: function(data) {
//dostuff
$t.removeClass('loading');
}
});
});
That, in my opinion, would be the simplest and most effective way of doing it. If you want to look further, here's a fiddle

Try fiddling around with absolutely positioning the element.
fiddle
img {
position: absolute;
left: 112px;
top: -22px;
}
https://jsfiddle.net/kmbxawdd/2/
Furthermore, you can set the containing elements position to relative, meaning you can style directly to these dimensions rather than the documents.

My solution: add a class to the input element that defines a background image, then modify its position with background-position-x and background-position-y
.Loading {
background-image: url("bg.gif");
background-repeat: no-repeat ;
background-position-x: 99% ;
background-position-y: 50% ;
}
you can also use keywoords for postioning
background-position-x: right;
background-position-y: center;
or combine them
background-position: center right;
then, you can just add or remove this class to show/hide the animation

Try the following:
Place the animation after the input field in the HTML
Set position: relative; on the image
Allows you to tweak the position of the element from where it would be by default
Use the top CSS attribute to shift the animation upward to the point where it is directly on top of the input field.

Place both the input and the img inside a div and make that div look like a text box. I am currently on my phone so it might not be perfect but I think you get the point.
http://jsfiddle.net/soz8jq2x/

just include <img> element inside <input> element.then you can use js to show and hide this image using id attribute.
<img class="loading" src="http://loadinggif.com/images/image-selection/3.gif" id="img-loading">
.loading {
position: absolute;
top: 206px;
right: 30px;
display: none;
}

Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

I am trying to build a simple web page for my website using HTML, CSS, JavaScript and JQuery. What I want is to display a slideshow of a few of my images at the top of the page. I just want the pictures to fade out and fade in after one another forever until the user closes the browser. I want each picture to be displayed for a certain amount of time, after which it will fade out and another picture would fade in.
I referred to this as well as this post on SO but couldn't find a solution. I got some idea from this page and tried to develop some code.
The overall layout of the website is as follows:
For this, my index.html page looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="css/style.css" />
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/common.js"></script>
<script language="javascript" src="js/banner_rotator.js"></script>
</head>
<body onload="loadBody();">
<div id="wrapper">
<img id="headerlogo" />
<div id="nav">
Home
About
Weddings
Portraiture
Landscapes
Products
Miscellaneous
Services
Contact
</div>
<div id="container">
<div id="content">
<!-- Main content starts here -->
<p>
Welcome to the world of The Siblings' photography.
</p>
imgpos = <span id="imgposspan"></span>
<!-- Main content ends here -->
</div>
</div>
</div>
</body>
</html>
The CSS is like this:
body {
background-color: transparent; color: #d0d0d0;
font: normal normal 11px verdana; margin: 0 auto;
}
#wrapper {
background-color: transparent; width: 960px; margin: 0 auto;
}
#headerlogo {
border-radius: 0px 0px 5px 5px; display: block;
width: 960px; height: 350px;
background-color: #d0d0d0;
}
#container {
width: 100%; margin-top: -35px;
}
#nav {
background-color: transparent;
color: #888888; border-radius: 5px; padding: 10px;
width: 100%; position: relative; top: -40px;
}
#nav>a {
border-radius: 5px; display: inline-block; padding: 5px 19px;
font-weight: bold; border: 1px solid transparent;
color: #888888; background: none none transparent no-repeat;
}
#nav>a:link {
text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:visited {
text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:hover{
text-decoration: none; border-color: #ffa500; background-image: url("/img/1x30_ffa500.gif");
background-repeat: repeat-x; box-shadow: 0px 0px 5px #ffd700;
}
#nav>a:active {
text-decoration: underline; border-color: transparent;
background-image: none;
}
#content {
background-color: #f0f0f0; color: #202020;
padding: 5px; border-radius: 5px;
}
The common.js file is like this:
$(document).ready(function (){
var images = new Array();
images[0] = new Image();
images[0].src = "img/coverpics/sea_link.jpg";
images[1] = new Image();
images[1].src = "img/coverpics/marine_drive.jpg";
images[2] = new Image();
images[2].src = "img/coverpics/backbay.jpg"
banner_rotator("headerlogo", images, 0);
});
And, the banner_rotator.js file is like this:
function banner_rotator(imgid, imgarray, imgpos) {
setInterval(function() {
if (imgpos >= imgarray.length || imgpos == undefined)
imgpos = 0;
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000, "linear");
$("#"+imgid).delay(6500);
$("#"+imgid).fadeOut(500);
// $("#imgposspan").html(imgpos);
imgpos++;
}, 8000);
}
Now, my problem description is as follows:
For the first few seconds the top portion is blank. The image is not showed, even though I am developing and having all the files on my local machine itself.
This first image directly pops up on the screen, instead of fading in.
After this image fades out, the image block vanishes, as if it is set to display: none; for a second. The entire page that follows the image shifts up. Then, the next image fades in and so forth everything runs normal.
Hence, in short, I have problems with the starting of this slideshow. Can anybody please help?
Also please tell me where can I put my code so everybody here can access and see for themselves how it runs?
JSFIDDLE

<img id="headerlogo" />
Don't do that (an image tag with no src attribute)
Put a div that will hold the space (set position:relative with width & height in css)
Then the problem is that you are changing your src attribute in your time loop, this ain't smooth
In your CSS, suppose you name your slider wrapper headerlogo_wrapper
div.headerlogo_wrapper > img {position:absolute;display:none;left:0;top:0}
Then you append your images to the space holder you have created (they will not show obviously)
Then you fadeIn your first image then you launch your setInterval :
//after having appended the images to the slider wrapper :
var $img = $("div.headerlogo_wrapper > img");
$img.eq(0).fadeIn(1000, "linear");
var ivisible = 0;
setInterval( function() {
$img.eq(ivisible).fadeOut(500);
++ivisible;
if (ivisible>$img.length-1) ivisible = 0;
$img.eq(ivisible).stop().fadeIn(1000, "linear");
}, 8000);
(If you want an image to be shown during load, some simple changes shall do; also if the first interval start immediately you obviously don't need to fadeIn "manually" the first image)

Try this: http://jsfiddle.net/3XV5M/
Your problem is the first time you run the timer function it won't run straight away. It will be run after 8000ms. The way this fiddle works is it will execute the function immediately and the run itself again after 8 seconds. Note I'm using setTimeout instead of setInterval.
function banner_rotator(imgid, imgarray, imgpos) {
if (imgpos >= imgarray.length || imgpos == undefined) imgpos = 0;
$("#"+imgid).attr({ "src" : imgarray[imgpos].src })
.fadeIn(1000, "linear")
.delay(6500)
.fadeOut(500);
imgpos++;
setTimeout(function() {banner_rotator(imgid, imgarray, imgpos) }, 8000);
}
The other problem is you need to hide the images first, so they can fade in. They wont fade in if they are already visible.
#headerlogo {
border-radius: 0px 0px 5px 5px;
width: 960px; height: 350px;
background-color: #d0d0d0;
display: none; /* Add this */
}
Then to prevent the other elements jumping up when you fade the images out, wrap the image element inside a div and set it's height. I used a div with a class of banner and added this style:
.banner {
height: 350px;
}
Hope that helps.

The problem is that you are fading out at the end of your interval. So replace this:
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000, "linear");
$("#"+imgid).delay(6500);
$("#"+imgid).fadeOut(500);
with this:
$("#"+imgid).fadeOut(500)
$("#"+imgid).queue(function(){
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000);
$("#imgposspan").html(imgpos);
imgpos++;
$(this).dequeue();
});
JSFIDDLE demo

How to display tooltip when mouse hover iframe

I'm using Telerik Radeditor which is rich text area and the editor content is an iframe, something like below:
<iframe frameborder="0"
src="javascript:'<html></html>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;"
title="hello world"
id="contentIframe"></iframe>
My goal is to display the "hello world" tooltip when a user mouse hover the iframe area.
As you can see I put "title" attribute but it is not showing up.
To mimic the tooltip behavior I tried placing overlay div and title which worked but then I lost mouse control because of the overlay div.
I also desperately tried putting title in the iframe body but then I had to click inside of iframe to make it happen which is not the solution.
var iframe_html = $(wrapper).find("iframe").contents().find("html");
$(iframe_html).prop("title", "hello my tooltip 1");
var iframe = $(wrapper).find('iframe');
$(iframe).prop("title", "hello my tooltip 2");
var iframebody = $(iframe).contents().find('body');
$(iframebody).prop("title", "hello my tooltip 3");
I'm using jQuery UI 1.8.16 which does not come with Tooltip capability thus that cannot be an option..
Could anyone help me figure how to show the tooltip?

You are able to assign a title to the iframe but you wont be able to see it in the iframe.. Change the frameborder to "2" and move your cursor to it.. there you go..Title appears...
To see the title on iframe you must set the title of iframe content and not the iframe itself..
just like i've done below..
<iframe frameborder="0"
src="javascript:'<div id=\'hey\' title=\'Hello World\'>Helllo World</div>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;"
title="hello world"
id="contentIframe">
</iframe>
Alternatively..
using jQuery
$(document).ready(function () {
$("#contentIframe").contents().find("body").attr('title','Hello World');
});
This is a fiddle for your reference..

I just added an iframe to the div in the w3 schools tooltip tutorial (TryIt editor here) and it worked perfectly. To my surprise.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #994444;
color: #ffffff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Proof of Concept</h2>
<p>This, cobbled from the W3 schools tutorial on CSS tooltips. I added an Iframe inside the div; one may still interact therewith, yet enjoy full tooltipitude.</p>
<p> So, move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Hello World</span>
<iframe height="600px" src="https://imgur.com/a/71J1gQZ" width="600px" ></iframe>
</div>
</body>
</html>
See it live here :
https://faustsstudy.blogspot.com/p/blog-page_14.html
but it requires support for data URIs.