Not really at ease when it comes to coding, I would appreciate your help on an issue I am facing:
On a landing page, some content should be visible on click or by clicking on a table of content on the top of the page.
On-click toggle works. However, clicking on a menu item, works only once. Then, if I go back to the menu and click on another item of the menu, nothing happens
My guess is that the problem comes from scripts which are "separated" while they should be merged together.
Here is the code:
<style type="text/css">
a img
{
border: 0;
}
</style>
<style>
.ToggleTarget {
display: none;
}
</style>
<script type="text/javascript">
function toggle(id) {
var el = document.getElementById(id);
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
el.style.background= "white";
}
}
</script>
<script type=text/javascript>
if ( location.hash.length > 1 )
{
toggle(location.hash.substring(1));
}
</script>
Content
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="#1">Title1</a>
<br>
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="#2">Title2</a>
Content
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="100%" style="PADDING-TOP: 3px; PADDING-Bottom: 3px" bgcolor="#005a84" valign="top" colspan="4" align="left"><a style="COLOR: rgb(75,75,75); FONT-WEIGHT: bold; TEXT-DECORATION: none" href="javascript:toggle('1');">
<p style="text-decoration: none; font-family: Arial; font-size: 13px; color: rgb(255, 255, 255); height:10px; line-height:18px;"><strong>HEADER1
</strong></p>
</a>
<div id="1" class="ToggleTarget" style="padding-left:10px"><br>
CONTENT1
</div>
</td>
</tr>
<tr>
<td width="100%" style="PADDING-TOP: 3px; PADDING-Bottom: 3px" bgcolor="#005a84" valign="top" colspan="4" align="left"><a style="COLOR: rgb(75,75,75); FONT-WEIGHT: bold; TEXT-DECORATION: none" href="javascript:toggle('2');">
<p style="text-decoration: none; font-family: Arial; font-size: 13px; color: rgb(255, 255, 255); height:10px; line-height:18px;"><strong>HEADER2
</strong></p>
</a>
<div id="2" class="ToggleTarget" style="padding-left:10px"><br>
CONTENT2
</div>
</td>
</tr>
</tbody>
</table>
Many thanks!
How about changing
href="javascript:toggle('2”);
to
href="javascript:toggle('2');
Does this solve your problem?
You can create another function to handle the links : (juste behind the toggle function would work)
function goToContent(id){
var el = document.getElementById(id);
if(el.style.display != "block"){
toggle(id);
}
el.scrollIntoView();
}
Then reference it in the html
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="javascript:goToContent('1');">Title1</a>
<br>
<br>
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="javascript:goToContent('2');">Title2</a>
See this fiddle : http://jsfiddle.net/qZLsB/13/
Although it should be working, a "cleaner" way to handle clicks would be to use JavaScript DOM events. If you feel like learning about it, you can read more on http://www.w3schools.com/js/js_htmldom_events.asp
Here is a simplified example of what you were trying to do. I think you just overcomplicated it.
http://jsfiddle.net/j9HXk/
<p onclick="toggleContent('1')"><strong>HEADER1</strong></p>
You can use the click event to do what you were doing. Then you can put some code in the onLoad event to check the hash at the end of the current URL and show/hide the appropriate section.
Let me know if you have any questions about how this is working.
Related
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.
I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});
Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2
I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
I am trying to open a popup window from a parent window. I have two tr and each tr has a apply button and as soon as I click on the apply button it will open a popup window.
But somehow, popup window gets opened for first tr only apply button meaning as soon as I click on the Apply Button for the first tr, popup window gets opened.
But for the second tr apply button, popup window doesn't gets opened.
I am not sure why it is not working.
Below is my full code.
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click( function() { close() })
$('#JN_apply').click( function() { open($(this).data('url')); })
});
</script>
</head>
<body bgcolor="#F8F8F8">
<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px">
<th width = "65%">Description</th>
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Program
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Material
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
This is the jsfiddle that I have created. In that you will see that if you click on first Apply button then the popup will get open, but as soon as you click on the second apply button, the popup won't get open. Can anybody explain me why this is happening? And how to resolve this?
Your html is invalid: the id attribute is supposed to be unique. When you use the selector #JN_apply" it selects just one of the buttons (in most browsers this will be the first, as you have seen).
You should change each one to use a class instead of an id:
<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
...and then change the jQuery selector to match:
$('.JN_apply').click( function() { open($(this).data('url')); })
Updated demo: http://jsfiddle.net/p3wgm/3/
Note also that it's not a good idea to create global functions called open() and close() because there are already built-in functions open() and close() and your functions will overwrite these. Perhaps openPopup() and closePopup() or similar? Or define them inside your document ready handler so that they're not global, which would probably be better regardless of the names. Or if they're only ever called from one place (like in your example) just put that code directly in the click handlers.
I have coded a simple HTML5 audio player (javascript and css) thats starts when the user clicks play. I have got it to work with one file on the page. I have copied and pasted the code several times so I can have several files on the same page, the player breaks and won't play any of them. Please, any help is appreciated! Below is my HTML:
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
Here is the css:
/* globals */
html {
font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background: url('background.png');
background-repeat: no-repeat
}
body {
margin: 0 auto;
text-align: center;
}
#audioplayer {
display: block;
overflow: hidden;
width: 30px;
height: 30px;
position: relative;
}
.play,.pause {
background: #fff;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
margin: 5px;
display: block;
overflow: hidden;
text-indent: -1000px;
}
.play:after {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width: 5px 5px 5px 10px;
width:0;
height:0;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
.pause:after {
border-color: #000;
background: #fff;
border-style:solid;
border-width: 0 3px 0 3px;
width:2px;
height:10px;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
And last but not least my Javascript:
var audio=document.getElementById("audio");var canvasWidth=canvasHeight=30;var radius=canvasWidth/2;var audioplayer=document.getElementById("audioplayer");canvas=document.createElement("canvas");canvas.setAttribute("width",canvasWidth);canvas.setAttribute("height",canvasHeight);canvas.setAttribute("id","canvas");audioplayer.appendChild(canvas);function updateUI(){var f=audio.currentTime;var g=audio.duration;var b=document.getElementById("canvas");var e=b.getContext("2d");var a=y=radius=canvasWidth/2;var d=-Math.PI/2;var c=d+((f/g)*Math.PI*2);b.getContext("2d").clearRect(0,0,canvasWidth,canvasHeight);e.fillStyle="#000";e.beginPath();e.moveTo(a,y);e.arc(a,y,radius,d,c,false);e.closePath();e.fill()}audio.addEventListener("play",function(a){document.getElementById("playpause").innerHTML='Pause'},true);audio.addEventListener("pause",function(a){document.getElementById("playpause").innerHTML='Play'},true);audio.addEventListener("ended",function(a){document.getElementById("playpause").innerHTML='Play'},true);document.getElementById("playpause").addEventListener("click",function(){if(audio.paused){audio.play()}else{if(audio.ended){audio.currentTime=0;document.getElementById("playpause").innerHTML='Pause';audio.play()}else{audio.pause()}}},true);audio.ontimeupdate=updateUI;audio.addEventListener("timeupdate",updateUI);
Iframe added to the HTML:
<tbody>
<tr>
<td style="vertical-align: top;">
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
</div>
<br>
</td>
<td style="vertical-align: top;">
<div style="text-align: right;">
</div>
<div style="text-align: right;"><big><big><span style="font-weight: bold;"><small><span class="style2"><span class="style6">May 6, 2011 <span style="font-style: italic;">(Right Click and select Save As to download to your iPod or other MP3 player)</span></span></span></small></span></big></big><br>
<big>
</big></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"> <iframe src=<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>"></iframe> <br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
A couple of months ago I built a jQuery plugin that replaces element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.
try this
http://osvaldas.info/audio-player-responsive-and-touch-friendly
Try to enclosure another player in Iframe or HTML tag
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.