Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Just to let you know I am not a programmer. I try to understand some code and change it where I can using trial and error.
I have the following piece of code from a Joomla module where I need to change in the function: function pausescroller the document.write function that is used to document.getElementById('ElementID').innerHTML and I don't know how. I am posting the code of the function function pausescroller where I tried implementing the above w/o luck. Nothing displays on front end:
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.getElementById('divId').innerHTML = "<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>";
//document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
HERE IS THE CODE OF THE WHOLE JavaScript part:
<script type="text/javascript">
<!--
var pausecontent=new Array();
var cnti = 0;
<?php
for($im=0; $im<count($testi_RSMSC); $im++) {
$dateExp_RSMSC = explode('-', $testi_RSMSC[$im]['date']);
$timestamp_RSMSC = mktime(12,0,0,$dateExp_RSMSC[1],$dateExp_RSMSC[2],$dateExp_RSMSC[0]);
$dateConfig_RSMSC = JFactory::getConfig();
$siteLang_RSMSC = $dateConfig_RSMSC->get('config.language');
setlocale(LC_ALL, $siteLang_RSMSC);
$dateView_RSMSC = strftime("%d %B %Y", $timestamp_RSMSC);
$testi_RSMSC[$im]['comment'] = preg_replace('/\s\s+/', ' ', trim($testi_RSMSC[$im]['comment']));
$testi_text = '';
if($char_RSMSC > 0) {
$testi_text .= substr($testi_RSMSC[$im]['comment'], 0, ($char_RSMSC-3)).'...';
} else {
$testi_text .= $testi_RSMSC[$im]['comment'];
}
####
$RStesti_pic_file = '';
if($imgDispRSMSC == '1') {
if(file_exists(JPATH_ROOT.DS.'images'.DS.'com_rsmonials'.DS.$testi_RSMSC[$im]['id'].'.gif')) {
$RStesti_pic_file = '<img src="'.JURI::root().'images/com_rsmonials/'.$testi_RSMSC[$im]['id'].'.gif" style="max-width:'.$imgMwRSMSC.'px; max-height:'.$imgMhRSMSC.'px; border:'.$imgBorderRSMSC.';" />';
} else if(file_exists(JPATH_ROOT.DS.'images'.DS.'com_rsmonials'.DS.$testi_RSMSC[$im]['id'].'.png')) {
$RStesti_pic_file = '<img src="'.JURI::root().'images/com_rsmonials/'.$testi_RSMSC[$im]['id'].'.png" style="max-width:'.$imgMwRSMSC.'px; max-height:'.$imgMhRSMSC.'px; border:'.$imgBorderRSMSC.';" />';
} else if(file_exists(JPATH_ROOT.DS.'images'.DS.'com_rsmonials'.DS.$testi_RSMSC[$im]['id'].'.jpg')) {
$RStesti_pic_file = '<img src="'.JURI::root().'images/com_rsmonials/'.$testi_RSMSC[$im]['id'].'.jpg" style="max-width:'.$imgMwRSMSC.'px; max-height:'.$imgMhRSMSC.'px; border:'.$imgBorderRSMSC.';" />';
} else if(file_exists(JPATH_ROOT.DS.'images'.DS.'com_rsmonials'.DS.$testi_RSMSC[$im]['id'].'.jpeg')) {
$RStesti_pic_file = '<img src="'.JURI::root().'images/com_rsmonials/'.$testi_RSMSC[$im]['id'].'.jpeg" style="max-width:'.$imgMwRSMSC.'px; max-height:'.$imgMhRSMSC.'px; border:'.$imgBorderRSMSC.';" />';
} else {
$RStesti_pic_file = $RS_noimg;
}
if($imgAlignRSMSC == '1') {
$RStesti_pic_file = '<div style="margin-bottom:5px; text-align:left;">'.$RStesti_pic_file.'</div>';
} else if($imgAlignRSMSC == '2') {
$RStesti_pic_file = '<div style="margin-bottom:5px; text-align:right;">'.$RStesti_pic_file.'</div>';
} else if($imgAlignRSMSC == '3') {
$RStesti_pic_file = '<span style="float:left; margin-right:5px;">'.$RStesti_pic_file.'</span>';
} else if($imgAlignRSMSC == '4') {
$RStesti_pic_file = '<span style="float:right; margin-left:5px;">'.$RStesti_pic_file.'</span>';
} else {
$RStesti_pic_file = '<div style="margin-bottom:5px; text-align:center;">'.$RStesti_pic_file.'</div>';
}
}
####
$RSMSC_disp_context = '<div style="text-align:'.$alignRSMSC.';">'.$RStesti_pic_file.addslashes($testi_text).'</div><br /><em><strong>'.addslashes($testi_RSMSC[$im]['fname']).' '.addslashes($testi_RSMSC[$im]['lname']).'</strong>';
if($displayaboutRSMSC == '1') {
if(($testi_RSMSC[$im]['about'] != '') || ($testi_RSMSC[$im]['location'] != '')) {
$RSMSC_disp_context .= ', Ηλικία: <small>';
$RS_isa = 0;
if($testi_RSMSC[$im]['about'] != '') {
$RSMSC_disp_context .= addslashes($testi_RSMSC[$im]['about']);
$RS_isa = 1;
}
if($testi_RSMSC[$im]['location'] != '') {
if($RS_isa == '1') {
$RSMSC_disp_context .= ', ';
}
$RSMSC_disp_context .= addslashes($testi_RSMSC[$im]['location']);
}
$RSMSC_disp_context .= '</small>';
}
}
if(($displayurlRSMSC == '1') && ($testi_RSMSC[$im]['website'] != '')) {
$RSMSC_disp_context .= '<br /><small>'.$testi_RSMSC[$im]['website'].'</small>';
}
if($displaydateRSMSC == '1') {
$RSMSC_disp_context .= '<br /><small>'.$dateView_RSMSC.'</small>';
}
$RSMSC_disp_context .= '</em>';
?>
pausecontent[cnti++]='<?php echo $RSMSC_disp_context; ?>';
<?php
}
?>
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.getElementById(divId).innerHTML = '<div class="innerDiv" style="position: absolute; width: 100%" id="' + divId + '1">' + content[0] + '</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="' + divId + '2">' + content[1] + '</div>';
//document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
/* initialize()- Initialize scroller method. -Get div objects, set initial positions, start up down animation */
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
/* animateup()- Move the two inner divs of the scroller up and in sync */
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
/* swapdivs()- Swap between which is the visible and which is the hidden div */
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
/* setmessage()- Populate the hidden div with the next message before it's visible */
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent, "rsmsc_scroller", "rsmsc_scroller_class", <?php echo $delay_RSMSC; ?>);
//-->
</script>
Change this line:
document.getElementById('divId').innerHTML = "<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>";
to this:
document.getElementById(divId).innerHTML = '<div class="innerDiv" style="position: absolute; width: 100%" id="' + divId + '1">' + content[0] + '</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="' + divId + '2">' + content[1] + '</div>';
(The very first, and very last double quote, should be single quotes, and do not put quotes around the var name divid when calling document.getElementById(divId).innerHTML)
-EDIT- But actually the element you are looking for is not there yet, place the parent div into the html first '<div id="myDiv" class="divClass" style="position: relative; overflow: hidden"></div> then if var divId = 'myDiv'; call the function with:
pausescroller(content, divId, divClass, delay);
The value you set innerHTML to needs to be a complete string - adding ' to each side will fix it:
document.getElementById('divId').innerHTML = '"<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>";'
Related
I have dynamic table on my JSP page, where I have added the rows to the table which depends on a dropdown field.
This is my table code:
function createDynamicTable(data){
currentbatchitemData = eval(data);
for(var i = 0; i < currentbatchitemData.length; i++){
var code = currentbatchitemData[i].empCode;
var name = currentbatchitemData[i].empName;
var salary = 0 ;
var income = currentbatchitemData[i].incomeYear;
var month = currentbatchitemData[i].month ;
var des = currentbatchitemData[i].batchDesc;
var tableInfo = "<tr>";
tableInfo +=
'<td class="table-td-text-color">' + code + '</td>' +
'<td class="table-td-text-color">' + name + '</td>' +
'<td class="table-td-text-color">'+ salary + '</td>' +
'<td class="table-td-text-color">' +
'<button type="button" class="btn-edit btn btn-xs"><span class="fa fa-edit"></span></button>'+
'<button type="button" onclick="delRow(this);" class="btn-del btn btn-xs"><span class="fa fa-trash"></span></button>' +'</td>';
$("#currentbatchitem tbody").append(tableInfo);
}
$(document).ready(function(){
$('#currentbatchitem').DataTable();
});
$("#income_year").val(income);
$("#pay_month").val(month);
$("#batch_description").val(des);
}
I want when I have changed the dropdown , the page will be disabled and a gif image will be shown as a reloading image and when the for loop is terminated / after the adding rows on the table; the gif image will be hide and the jsp page will be shown again.
How can I do this?
It seems you're using jQuery DataTables, there's a default option to show the processing indicator:
$('#currentbatchitem').dataTable( {
"processing": true
} );
More details here
PS: You can customize the message like so:
$('#currentbatchitem').dataTable( {
"oLanguage": {
"sProcessing": "DataTables is currently busy"
}
});
If you want to instead show a loading GIF, you can override the CSS class like so:
.dataTables_wrapper .dataTables_processing{
background-image:url('url/to/your/image.gif');
}
This is a plain javascript solution
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function createDynamicTable(){
document.getElementById('loadingDiv').style.display = "block";
//your for loop
setTimeout(function(){
document.getElementById('loadingDiv').style.display = "none";
}, 2000);
}
</script>
</head>
<body onload="createDynamicTable();">
Some page content
<div id="loadingDiv" style="background-color: black; opacity: 0.50; width: 100%; height: 100%;
position: absolute; top: 0px; left: 0px; display: none; z-index: 100;">
<img src="http://gifyo.com/public/img/loading.gif" alt="Loading..."/>
</div>
</body>
Iam truncating a large field in php. Its all working fine except that iam getting an error on the following line. Iam truncating more than 25 characters with a more hyperlink. When i click the more link, a javascript alert triggers with the actual data.
$length_limit = 25; //limit to this number of characters
$actual_length = strlen($value); //count characters in the $value
$original_text = $value;
$truncated_text = substr($value,0,$length_limit);
if($actual_length <= $length_limit){
$value = $original_text;
} else {
$value = $truncated_text." ... <a onclick='alert(\"'.$original_text.'\")'>more</a>";
Iam getting the error from the last line $value=.... May be some quoatation mark problem. Can someone pls help me with the same.
try this
echo $value = $truncated_text." ... <a onclick=\"alert('".$original_text."')\">more</a>";
You can do it like below (anyone of them):-
echo $value = $truncated_text.' ... <a onclick=\'alert("'.$original_text.'")\'>more</a>';
Or
echo $value = $truncated_text." ... <a onclick=\"alert('".$original_text."')\">more</a>";
Pop-Up Window code:-
<style>
#edit_price_background_overlay {
background: rgba(0, 0, 0, 1) none repeat scroll 0 0;
bottom: 0;
display: none;
overflow-y: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 999999;
}
#mainnew_window {
color: white;
float: left;
margin: 20px;
padding: 100px;
text-align: center;
}
</style>
<div id="edit_price_background_overlay">
<div id="mainnew_window">
</div>
</div>
<?php
$value = 'dhgffdhgfhfhfhghgfhgfhgfhfghfghgfhgfhgfhgfgfhgfhgfhgfhgfhfgrtdyretrertertretgfdvfgvdfgdfbdfgdfbgfnbgbgfhnhhethfgbgfdnggrehgteggbfdvgfdfgergfdgfdrfgrdfgert4gtrhnfgbfdbvcvcbvcbbvcbhrgdghgyfgbfdbgfvfdbtgf';
$length_limit = 25; //limit to this number of characters
$actual_length = strlen($value); //count characters in the $value
$original_text = $value;
$truncated_text = substr($value,0,$length_limit);
if($actual_length <= $length_limit){
echo $value = $original_text;
} else {
echo $value = $truncated_text." ... <a onclick=\"showdata('".$original_text."','mainnew_window','edit_price_background_overlay')\">more</a>";
}
?>
<script>
function showdata(mytext,innerdiv,outerdiv){
var elem = document.getElementById(innerdiv);
var elem2 = document.getElementById(outerdiv);
console.log(elem);
if(typeof elem !== 'undefined' && elem !== null) {
document.getElementById(innerdiv).innerHTML = mytext;
document.getElementById(outerdiv).style.display = 'block';
}
}
</script>
Note:- put this whole code in php file as it is and check.
I have some old code that I am trying to convert to divs. It contains frames that have no target src, just JavaScript to generate a page.
Below is the code...
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
window.editbox.document.write(editboxHTML);
window.editbox.document.close();
window.editbox.document.f.ta.value = defaultStuff;
update();
}
function update() {
var textarea = window.editbox.document.f.ta;
var d = dynamicframe.document;
if (old != textarea.value) {
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, ''))
d.write(extraStuff);
d.close();
}
window.setTimeout(update, 150);
}
<frameset onload="init();" rows="50%,50%" resizable="no">
<frame name="editbox" src="javascript:'';">
<frame name="dynamicframe" src="javascript:'';">
</frameset>
This code has a user input box at the top to input HTML code into, and the bottom displays what that code would look like in a browser.
How would I manipulate this code to work with divs instead of frames, so I can include extra styling, and so that it is not fully depreciated in HTML5.
If your answer includes AJAX, please can you explain it as I am not familiar with that coding.
EDIT: If there is no div alternative, is there an iframe alternative?
Answer Updated
CSS Fixed
Error fixed
Jquery way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 50%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
$("#editbox").html(editboxHTML);
$("#editbox form[name='f'] [name='ta']").focus();
$("#editbox form[name='f'] [name='ta']").val(defaultStuff);
update();
}
function update() {
var textarea = $("#editbox form[name='f'] [name='ta']");
var d = $("#dynamicframe");
if (old != textarea.val()) {
old = textarea.val();
if (old != undefined){
d.html(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')){
d.append(extraStuff);
}
}
else{
d.html("old undefined");
}
}
setTimeout("update()", 150);
}
</script>
<button onclick="init()">EDIT</button>
<div id="editbox"></div>
<div id="dynamicframe"></div>
you can just create one div tag with id say <div id='editbox' /> and add one line code in your update function document.getElementById("editbox").innerHTML=editboxHTML;
I wrote a code for a 5 image slideshow and the NEXT and PREVIOUS buttons are supposed to take you to the next and previous slide but nothing happens when i press them. Can anyone help me out? some more detail some more detail some more detail some more detail
var slideShow = [];
function newImage(source, caption) {
var pic = new Object();
pic.src = source;
pic.cap = caption;
return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
i = (i + 1);
if (i == 5)
i = 0;
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' id="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
if (i == -1)
i = 4;
else
i = (i - 1);
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' id="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
#picture {
width: 200px;
margin-left: 50;
margin-right: auto;
}
div.buttons {
width: 200px;
margin-left: auto;
margin-right: auto;
}
div.info {
width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 3px solid purple;
}
button {
font-size: 12px;
}
button.left {
auto;
margin-right: 418px;
}
p {
text-align: center;
}
<h3>Project 2: Slide Show</h3>
<h4>I do not own any of the following pictures</h6>
<h4>All pictures acquired online, unknown owners</h4>
<br />
<div id="picture">
<img src="slideshow1.jpg" id="images" alt="my picture" height="200 px">
<p>The Happy Cat</p>
</div>
<div class="buttons">
<button class="left" onClick="prevPic()">PREVIOUS</button>
<button onClick="nextPic()">NEXT</button>
</div>
1) Typo in slideShow
2)Not related but you cannot have duplicate id instead use class
var slideshow = [];
function newImage(source, caption) {
var pic = new Object();
pic.src = source;
pic.cap = caption;
return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
i = (i + 1);
if (i == 5)
i = 0;
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' class="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
if (i == -1)
i = 4;
else
i = (i - 1);
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' class="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
<h3> Project 2: Slide Show </h3>
<h4> I do not own any of the following pictures </h6>
<h4> All pictures acquired online, unknown owners </h4>
<br />
<div id="picture">
<img src="slideshow1.jpg" class="images" alt="my picture" height="200 px">
<p>The Happy Cat</p>
</div>
<div class="buttons">
<button class="left" onClick="prevPic()">PREVIOUS</button>
<button onClick="nextPic()">NEXT</button>
</div>
You declaring var slideShow = []; array, however later you are populating slideshow with the code:
slideshow[0] = newImage("slideshow1.jpg","The Happy Cat");
which throws ReferenceError because you can't set property of the undefined.
Use var slideshow = [] instead of var slideShow = []
I have a #val container div that stretches to accommodate Javascript content within a div called #cat-container.
cat-container has 4 tabs above it and are numbered 1 - 4, so if you click 1, it will load content from a php array, and similar for tabs 2 -3.
When you click on each tab, #val-container successfully stretches to the correct height, however I have set tab 1 and its content to display by default as the page loads. The problem is that the content from all the other tabs gets loaded into tab 1 onpage load.
<script type="text/javascript">
var i=1;
var tab;
document.getElementById('cat-container').style.position='relative';
document.getElementById('val-container').style.height='auto';
while(tab=document.getElementById('option'+i+'-body'))
{
tab.style.position='absolute';
tab.style.top='0';
tab.style.left='0';
i++;
}
var urllocation = location.href; //find url parameter
if(urllocation.indexOf("#") == -1)
{
displayTab(1);
}
else
{
if(urllocation.indexOf("#option1")>-1)displayTab(1);
else if(urllocation.indexOf("#option2")>-1)displayTab(2);
else if(urllocation.indexOf("#option3")>-1)displayTab(3);
else if(urllocation.indexOf("#option4")>-1)displayTab(4);
else displayTab(1);
}
</script>
Essentially I would like tab 1 to just show just its content on page load.
This line is the issue:
document.getElementById('val-container').style.height='auto';
So if the dispalyTab(1), just show its content!
The code that actually displays the tabs:
<script type="text/javascript">
function displayTab(num)
{
var tab,x;
x=1;
while(tab=document.getElementById('option'+x+'-body'))
{
if(num!=x)tab.style.display='none';
else tab.style.display='inherit';
x++;
}
}
</script>
<div class="category-tab" id="aoption1">Tab1</div>
<div class="category-tab" id="aoption2">Tab2</div>
<div class="category-tab" id="aoption3">Tab3</div>
<div class="category-tab" id="aoption4">Tab4</div>
<br><br>
Here is the PHP/HTML:
I have used tab 1 - 4 to simplify things but in actual fact they represent price ranges:
echo "<div id=\"cat-container\">";
echo '<div id=\"val-contain\">';
$cats=array(0,1000,5000,10000,100000);
for($ci=1;$ci<count($cats);$ci++)
{
if($ci==4)echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for over £100!</h3></a>";
else echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for under ".fixedToFloatCurrency($cats[$ci])."!</h3></a>";
$i=0;
for ($p = 0; $p < count($game); $p++ )
{
$game[$p]->getProduct();
if($game[$p]->price<$cats[$ci] && $game[$p]->price>=$cats[$ci-1])
{
if (($i % 3) == 0 )
{
if($i)echo "</tr></table>";
echo "<table id=\"newarrivals\" style=\"padding-top:5px;\"><tr>";
}
echo "<td>";
$game[$p]->getLink();
echo $game[$p]->link;
echo "<h2 class=\"section-tab-game2\">".$game[$p]->name."</h2>";
echo "<div class=\"container\" style=\"text-align:center;\"><div class=\"image-spacer\">";
echo $game[$p]->getImage();
echo $game[$p]->image;
echo "</div>";
echo "<div class=\"specialprice\" >";
if(!is_numeric($game[$p]->price)){
echo $game[$p]->price;
}
else
{
if($game[$p]->price < $game[$p]->maxprice)
{echo "From only: £".fixedtofloat($game[$p]->price);}
else
{echo "Only: £".fixedtofloat($game[$p]->price);}
}
echo "</div></div></a>";
echo "</td>";
$i++;
}
}
echo "</tr></table></div>";
}
echo "</div>";
echo '</div>';
?>
CSS:
#val-contain { }
#cat-container { }
.category-tab { width:125px;border:2px solid white; height: 50px; background:url('images/design- gac/valentines-navigation.png')0 0 no-repeat;float:left; text-align:center; font-family:Arial,sans-serif;font-size:12pt;font-weight:bold; color:white; padding-top: 7px;}
.category-tab a { color:white; }
.category-tab a:hover { color:#white; }
.category-body { width:515px; border:1px solid #3c2130; height: auto; overflow:hidden; background:url('images/design-gac/valentines-navigation-back.png')0 0 repeat-x;}
.category-body h3 { font-size:27pt; text-align:center; color: #ffffff; font-family: Arial,sans- serif;}
.container { background-color:white; }
.imgpad { margin-bottom: 10px; }
.vallinks {color: #c50f07; font-weight: bold; }
Hope someone can help?
Volterony
This is a pure html/inline css solution with one static tab.
<body>
<style>
html{
height: 100%;
}
body {
min-height: 100%;
}
</style>
<div style="max-height: 5%;min-height: 5%; background-color: #d9edf7;display: block">
<div class="category-tab" style="float: left" id="aoption1"><a href="#option1" onclick="displayTab(1);
return false;">Tab1</a></div>
<div class="category-tab" style="float: left" id="aoption2"><a href="#option2" onclick="displayTab(2);
return false;">Tab2</a></div>
<div class="category-tab" style="float: left" id="aoption3"><a href="#option3" onclick="displayTab(3);
return false;">Tab3</a></div>
<div class="category-tab" style="float: left" id="aoption4"><a href="#option4" onclick="displayTab(4);
return false;">Tab4</a></div>
</div>
<div style="max-height: 95%;min-height: 95%; background-color: red;display: block">
Tab 1 content
</div>
</body>
you used 'val-contain' as your div's id
echo '<div id=\"val-contain\">';
but you are trying to change it with
document.getElementById('val-container').style.height='auto';
change the div's id to val-container.