Overlapping Two DIVS Horizontally - javascript

Hi I have two divs within a table cell (making a Timeline) and I need them to overlap rather then come under each-other.
The position attribute of all DIVs inside the cell has to remain the same (because of a drag/drop JQUERY plugin I used)
Link to Fiddle
Link to Updated Fiddle
<tr style="border:1px; height:30px;">
<td style="border:1px solid black; position:static">
<div style="margin-left:0;width:50px;display:inline;position:relative">
<div style="background-color: green; position:absolute">
Div1
</div>
</div>
<div style="margin-left:0px;width:20px;display: inline; position:relative">
<div style="background-color: red; position:absolute">
Div2
</div>
</div>
</td>
<td>
</td>
</tr>
I need both DIVs to be start relavtive from the edge of the cell.
Thanks

As far as I can tell you just need to push the red <div> down a bit. And since you've positioned it absolutely, it's easily done with top:
<div style="background-color: red; position:absolute; top:10px;">
Check this update on your jsFiddle

They're going to be stacked like this, you should also be able to float the divs and set z-index explicitly to stack them.
http://jsfiddle.net/ianfc89/JDff9/13/
HTML
<body onload="REDIPS.drag.init()">
<script>
REDIPS.drag.dropMode = 'multiple';
</script>
<div id="drag" class="containDiv">
<table class="tableWhole">
<tbody>
<tr>
<td class="tableCell">
<div style="position:relative">
<div id="A125_Contain" class="drag progressContainer" >
<div id="A125" style="cursor: move; background-color: red; width: 500px; height: 20px; ">A125</div>
</div>
<div id="B125_Contain" class="drag progressContainer" >
<div id="B125" style="cursor: move; background-color: green; width: 100px; height: 20px; ">A125</div>
</div>
<div>
</td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
</tr>
<tbody>
</table>
</div>
Styles
.containDiv {
}
.tableWhole {
width:1000px;
table-layout:fixed;
}
.tableCell {
width:300px;
height:60px;
border:1px solid black;
}
.progressContainer
{
display:inline; border-bottom-style: none; position: relative; top: 0px; left: 0px; width: 100px; height: 20px;
}

Related

Click event not firing on GWT site

I am attempting to automate testing on the client side of a GWT built site.
I have been able to run through all the DOM elements and find the span element which is clickable I tried the click() method but it never fires.
This can only be done on the client-side. I cannot adjust the source code to contain any ID's or names.
Here is my HTML code from the scratch pad. This does find the div that contains the table and get the span tag which is inside the first td.
<div tabindex="1779" id="isc_8C" style="left: 0px; top: 62px; width: 1566px; height: 165px; overflow: hidden; display: inline-block; position: absolute; z-index: 201998; cursor: default; background-color: white;" onfocus="isc.EH.focusInCanvas(ResultsGrid_1_body,true);"
onblur="if(window.isc)isc.EH.blurFocusCanvas(ResultsGrid_1_body,true);" onscroll="return ResultsGrid_1_body.$lh()" eventproxy="ResultsGrid_1_body">
<div id="isc_8B" style="width: 1566px; position: relative; z-index: 1000;">
<form onsubmit="return false;" action="javascript:void(0)">
<div id="ResultsGrid_1_body$28s" style="width: 1px; height: 0px; overflow: hidden; display: none;"><span style='width: 1px; height: 0px; vertical-align: text-top; display: inline-block;'></span>
</div>
<table width="1550" class="listTable" id="isc_8Ctable" role="presentation" style="overflow: hidden; table-layout: fixed;" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr role="listitem" aria-selected="true" aria-posinset="1" aria-setsize="1">
<td width="396" align="left" class="tallCellSelectedOver" style="height: 16px; overflow: hidden;">
<span class="clickable">748754434564</span>
</td>
<td width="180" align="left" class="tallCellSelectedOver" style="height: 16px; overflow: hidden;">Jon, smith</td>
</tbody>
</table>
<div id="ResultsGrid_1_body$284" style="width: 1px; height: 0px; overflow: hidden; display: none;"><span style='width: 1px; height: 0px; vertical-align: text-top; display: inline-block;'></span>
</div>
</form>
</div>
</div>
And the script code is
$('div [eventproxy=ResultsGrid_1_body] table td span').click();
How can I perform a click on the span tag?
try to associate id with the span , then add the function just before the end of body tag or if including a js file, then call it just above the body tag, not at the starting.
<span id="sp"> </span>
working example can be seen here
https://jsfiddle.net/2b645Lup/5/

Disabling the scroll ability in JSFiddle

Is there a way to fully disable scrolling in JSFiddle.
I've tried:
position: fixed;
and
overflow: hidden;
however I can still scrolldown when I embed the results in my site. I wondered if anyone had any tips on how to fully fix something and have no scrolling abilities.
My current HTML and CSS:
.hidden {
visibility: collapse;
}
html,
body {
height: fit;
background: #e2dede;
margin: 10px;
}
div {
width: fit;
overflow: hidden;
}
td + td {
border-left: 1px solid #eee;
}
th {
border-bottom: 1px solid #fff;
background: #333333;
color: #fff;
padding: 5px 5px;
font-family: "raleway";
font-size: 14px;
}
td {
border-bottom: 1px solid #eee;
background: #e2dede;
color: #000;
padding: 5px 5px;
font-family: "raleway";
font-size: 13px
}
<table class="tablesorter">
<table>
<thead>
<th>Name</th>
<th>Release Date</th>
</thead>
<tbody>
<tr>
<td>Peter Parker</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>John Hood</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>Clark Kent</td>
<td>12/07/2015</td>
</tr>
<tr>
<td>Bruce Almighty</td>
<td>13/07/2015</td>
</tr>
<tr>
<td>Bruce Evans</td>
<td>14/07/2015</td>
</tr>
</tbody>
</table>
When you embed a JSFiddle demo on your site, JSFiddle adds a "Result" bar across the top to add a link to allow editing the demo in JSFiddle. Because of that bar and a nested iframe set to the same height as the outer frame, a scroll bar shows up (demo).
<iframe height="300" width="100%" src="http://jsfiddle.net/5sadgev6/embedded/result,html,css" allowfullscreen="allowfullscreen" frameborder="0">
<div id="wrapper">
<div id="head">
<h1><a title="Edit in JSFiddle" href="/5sadgev6/light/" target="new">Edit in JSFiddle</a></h1>
<div id="actions" class="">
...
</div>
</div>
<div id="tabs" style="height: 298px;">
<div class="tCont result active" id="result">
<iframe style="height: 300px;" src="//fiddle.jshell.net/5sadgev6/show/light/" sandbox="allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
</div>
...
</div>
</div>
</iframe>
Look at the height settings added by JSFiddle in the above HTML.
So essentially, you can't prevent the embedded JSFiddle iframe from scrolling since it's the iframe within the embedded iframe that has a set height.
If you don't like the scroll:
Submit an issue to jsfiddle: https://github.com/jsfiddle/jsfiddle-issues
Don't use an embedded jsFiddle on your site.
Make a Stylish style that sets the iframe embedded within the iframe height to auto - this would only work on your browser, but would apply to the sites you specify.

On click event only fires once, why?

I've been having this problem for the past week but I just skipped it for this time.
So this is my jQuery code:
jQuery(function ($) {
$(function () {
$('.mPicture').on('click', function (e) {
e.preventDefault();
$(this).find('div').bPopup();
});
});
});
I have seen that people needed to use .live for getting it to work multiple times but that doesn't do anything with this code.
This code is connected to a div which isn't visible until an image is clicked.
So what my question is: Why doesn't this work and what do I need to change?
HTML:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: none;">
<div class="Merk">
<table id="tbLogo">
<tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat"/>
<div class="logoPopup" style="width: 700px; border: solid; border-color: white; border-width: 5px; border-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: 0 0 10px gray;">
<img src="logo's/AS.png" class="merkThumbnail" />
Put your text here
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
If any other information is needed, feel free to ask.
I think i have found the issue
$(this).find('div').bPopup();
is changing the html structure while rendering and its not reverting back to its original position.
From:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: none;">
<div class="Merk">
<table id="tbLogo">
<tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat" />
<div class="logoPopup" style="width: 700px; border: solid; border-color: white; border-width: 5px; border-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: 0 0 10px gray;">
<img src="logo's/AS.png" class="merkThumbnail" />
Put your text here
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
to:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: block;">
<div class="Merk">
<table id="tbLogo">
<tbody><tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat">
// Removed from here
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
// and added here
<div class="logoPopup" style="width: 700px; border: 5px solid white; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: gray 0px 0px 10px; left: -115.5px; position: absolute; top: 127px; z-index: 9999; opacity: 0; display: none;">
<img src="logo's/AS.png" class="merkThumbnail">
Put your text here
</div>
you should bind 'click' event on parent div, because as you said that the div isn't visible until an image is clicked: You cannot bind an eventListenner on any element if it was not exist. in this case, the code is look like:
$('#tbLogo').on('click', '#test', callbackFunction)
or
$('#tbLogo').on('click', '.mPicture', callbackFunction)
reference document by #errand :
http://learn.jquery.com/events/event-delegation/

Change Image with link hover a text list

I'm trying to set up a page that looks like the image below.
http://i.stack.imgur.com/GwRXf.png
I would like to have the main image replaced when I "hover" on one of the links listed nearby (a table or a list) disabling the "click" behavior.
I have tried to do this with css following this code:
http://jsfiddle.net/Kne3d/5/
I tried to change it in this way:
#gallery {
oveflow: auto;
text-align: center;
padding: 1em;
padding-top: 120px;
position: relative;
}
#gallery td {
display: inline;
padding: 0 1em;
}
#gallery img {
display: none;
position: absolute;
top: 10px;
left: 35%;
}
#gallery td:hover {
background: yellow;
}
#gallery td:hover ~ img {
display: block;
}
and:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="gallery">
<tr>
<td width="100%">Cat 1<img src="/images/01.png"></td>
<td width="150" rowspan="6">I WANT MY IMAGES HERE</td>
</tr>
<tr>
<td>Cat 2 <img src="/images/02.png"></td>
</tr>
<tr>
<td>Cat 3 <img src="/images/03.png"></td>
</tr>
<tr>
<td>Cat 4<img src="/images/04.png">
</td>
</tr>
</table>
I'd like my images will show up on the right column...
I also tried with Javascript:
<head>
<script language="JavaScript" type="text/JavaScript">
function showT(q){
document.getElementById('ima').setAttribute('src','0'+q+'.png')
}
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="80%"><p>• Image 1</p>
<p>Image 2</p>
<p>Image 3</p>
<p>Image 4</p>
<td width="20%"><img id="ima" src="images/00.png" width="150" height="150">
</td>
</tr>
</table>
</body>
but...without success: images doesn't show up :(
Any idea on how make it works?
A really simple way:
$('#nav').find('li').hover(function(){
$('#gallery').find('li').eq($(this).index()).toggle();
});
demo

Div menu next to the button

I have simple html page:
<html>
<head></head>
<body>
<table>
<tr>
<td>
<input type="image" src="http://backticket.com.ua/Img/addNew.jpg" onmouseover="ShowMenu();" onmouseout="HideMenu();" />
</td>
<td>
Some text that should be under appeared menu
</td>
</tr>
<tr>
<td colspan="2">
Some text that Some text that Some text that
</td>
</tr>
</table>
<div id="divMenu" style="display:none; width: 258px; padding: 8px 0px; border: solid 1px #CCC; background-color:White">
<div style="float: left; width: 140px; padding: 6px 2px;">
Print Page
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Email to a Freind
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Add to Favorites
</div>
</div>
<script type="text/javascript">
function ShowMenu() {
document.getElementById('divMenu').style.display = '';
}
function HideMenu() {
document.getElementById('divMenu').style.display = 'none';
}
</script>
</body>
</html>
I need to show a menu in hidden div next to the button (in the right side) over the other text and elements on the page. Also menu should be visible until mouseout of the button or menu, like on hover button in AddThis service.
Who can help me with javascript?
Thanks!
Put a div-tag around your table, give it the CSS style value "float: left".
Then, you give "divMenu" the CSS style value "float: right".
The rest seems to be working fine, at least in Firefox.

Categories