Div height auto issue - javascript

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.

Related

How to fix modal popup closing button's showing part on Wordpress?

I successfully added "x" close button into modal popup. But when i click on it then shows only some part of the content. I'd want it to show full page of content not just upper part.
I've tried CSS code and this php code:
CSS:
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: absolute;
right: 0;
top: 0
}
php:
<div id="surbma-yes-no-popup" class="uk-modal <?php echo 'surbma-yes-no-popup-' . $popupthemes; ?>">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<header style="background-color:#000;color:#fff;">
<span onclick="document.getElementById('surbma-yes-no-popup').style.display='none'" class="close-button topright" >×</span>
</header>
<h2><?php echo esc_attr_e( $options['popuptitle'] ); ?></h2>
</div>
<div class="uk-modal-content"><?php echo stripslashes( $options['popuptext'] ); ?></div>
<div class="uk-modal-footer">
<button id="button1" type="button" class="uk-button uk-button-large uk-button-<?php echo esc_attr_e( $options['popupbutton1style'] ); ?><?php if( $options['popupbuttonoptions'] != 'button-1-redirect' ) echo ' uk-modal-close'; ?>"><?php echo esc_attr_e( $options['popupbutton1text'] ); ?></button>
<?php if( $popuphidebutton2 != 1 ) { ?>
<button id="button2" type="button" class="uk-button uk-button-large uk-button-<?php echo esc_attr_e( $options['popupbutton2style'] ); ?><?php if( $options['popupbuttonoptions'] == 'button-1-redirect' ) echo ' uk-modal-close'; ?>"><?php echo esc_attr_e( $options['popupbutton2text'] ); ?></button>
<?php } ?>
</div>
</div>
</div>
It is able to close the popup but it is only shows upper part of the content, not a full page. It is just like cut of upper page, i expect to show the full content after clicking on it. How to fix?

Change the div color based on the output of for loop

How do I implode the output of below code into divs instead of echo "On" or "Off"?
I also want the divs to have background color of green if node is ON, and background of red if node is OFF:
<html>
<body>
<?php
for ($ipa=65; $ipa <= 72; $ipa++){
$ip = "10.32.12.".$ipa;
$ping_output=array();
exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
//echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';
if(stripos($ping_output[2],"TTL")!==false) {
echo $ip." is On <br/>";
} else if(stripos($ping_output[2],"unreachable")!==false){
echo $ip." is unreachable <br/>";
} else if(stripos($ping_output[2],"request")!==false){
echo $ip." is Off <br/>";
}
}
?>
</body>
</html>
here is something that I did, hope it helps you:
back-end, q3.php
<?php
$result = array();
for ($ipa=65, $i = 1; $ipa <= 72; $ipa++, $i++){
$ip = "10.32.12.".$ipa;
$ping_output=array();
exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
//echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';
if(stripos($ping_output[2],"TTL")!==false) {
// echo $ip." is On <br/>";
$result["enode".$i] = "on";
} else if(stripos($ping_output[2],"unreachable")!==false){
// echo $ip." is unreachable <br/>";
$result["enode".$i] = "unreachable";
} else if(stripos($ping_output[2],"request")!==false){
// echo $ip." is Off <br/>";
$result["enode".$i] = "off";
}
}
echo json_encode($result);
?>
front-end, q3h.html
<!DOCTYPE html>
<html>
<head>
<title>Node Status</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#wrap {
width: 100%;
margin: auto;
}
div[id*="enode"] {
display: inline-block;
margin: 10px;
width: 100px;
height: 100px;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="enode1">Node1</div>
<div id="enode2">Node2</div>
<div id="enode3">Node3</div>
<div id="enode4">Node4</div>
<div id="enode5">Node5</div>
<div id="enode6">Node6</div>
<div id="enode7">Node7</div>
<button>update nodes</button>
</div>
<script>
$(document).ready(function () {
$("button").click(function () {
$.ajax({
url: "q3.php",
dataType: 'json',
success: function (result) {
alert(result);
for (key in result) {
id = "#"+key;
if (result[key] == "on") {
$(id).css("background-color", "green");
}
if (result[key] == "unreachable") {
$(id).css("background-color", "yellow");
}
if (result[key] == "off") {
$(id).css("background-color", "red");
}
}
}});
});
});
</script>
</body>
</html>
so basically, this is what you should do, don't be shy and tell me if this works for you. :)

show and hide div onclick

I create this code to show and hide div this code work but when i use it with php not work correctly when i click show for the first div he show me the div
but when i click the second he show me the first not the second how to solve this?
include("connect.php");
$sql=mysqli_query($conn,"select * from tbl_codelibrary order by db_id desc")or die(mysqli_error($conn));
echo'<div id="no-more-tables">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">';
echo"<tr>";
echo"<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Title</th>
<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Code</th>";
echo"</tr></thead><tbody>";
while($row=mysqli_fetch_array($sql)){
$title=$row['db_title'];
$code=$row['db_code'];
echo"<tr>";
echo"<td data-title='Title'>";echo $title;echo'<div id="opener">Show Code</div>';echo"<br/>";echo'<div id="upbutton"><a onclick="return hide();">Hide Code</a></div>'; echo"</td>";
echo"<td data-title='Code'>";echo"<pre><code class='' ><";?><?php echo $row['db_code'];?><?php echo"></code></pre>";echo"</td>";
}
?>
</body>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
You are creating an html in a loop where you are using fixed id value instead of a dynamic one. This cause an id conflict. So your code will not work as desired. This only takes the first id of the page always.
I have written some dynamic content as per your requirement below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="showContent buttonCode">Show Code</a>';
echo' ';
echo'<a class="hideContent buttonCode">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.showContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').show();
});
$('.hideContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').hide();
});
</script>
Hope this will help you.
If you want it with javascript only then you can do like below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="buttonCode" onclick="showbenefit('.$i.')">Show Code</a>';
echo' ';
echo'<a class="buttonCode" onclick="hidebenefit('.$i.')">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' id='benefits-".$i."' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script>
function showbenefit(s) {
if(document.getElementById('benefits-'+s).style.display=='none') {
document.getElementById('benefits-'+s).style.display='block';
}
return false;
}
function hidebenefit(h) {
if(document.getElementById('benefits-'+h).style.display=='block') {
document.getElementById('benefits-'+h).style.display='none';
}
return false;
}
</script>
function show_hide(){
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
else if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
<div id="benefits" style="display:block">test</div>
Submit
Hello! Hope this help you!
p.s you can use .toggle() to show and hide in JQuery

Add generated Javascript Events to generated HTML

I did a bunch of reaserch but it seems that I cant find a good answer to my question.
I have this code here:
while($row = mysqli_fetch_row($query)){
$result .= '
<script>
function Click'.$DOMid.'01(){answer("'.$DOMid.'","'.$row[2].'", "accept");}
function Click'.$DOMid.'02(){answer("'.$DOMid.'","'.$row[2].'", "decline");}
</script>
<div id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
<p>
Freundschaftsanfrage von: '.$row[2].'
</p>
<button id = "'.$DOMid.'01" onclick="Click'.$DOMid.'01">Accept</button>
<button id = "'.$DOMid.'02" onclick="Click'.$DOMid.'02">Decline</button>
</div>
';
$DOMid = $DOMid+1;
}
$result .= '<script>
function answer(id, user, type){
$.ajax({
method: "POST",
url: "systems/friends_system.php",
data:{type: type, user, <?php echo json_encode($log_username);?>}
}).done(function(r){
if(r.charAt(0) == "_"){
window.location = "message.php?msg=" + r;
}else{
_("id").style.display = "none";
}
});
}
</script>';
echo $result;
exit();
its PHP code and it generates html and the javascript for each element.
But I think my javascript part isnt parsed at that point to the browser throws an error that the Clickxxx functions are not defined.
The resulting code looks like this:
<script>
function Click001(){answer("0","Drop", "accept");}
function Click002(){answer("0","Drop", "decline");}
</script>
<div id="0" style="box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
<p>
Freundschaftsanfrage von: Drop
</p>
<button id="001" onclick="Click001">Accept</button>
<button id="002" onclick="Click002">Decline</button>
</div>
<script>
function answer(id, user, type){
$.ajax({
method: "POST",
url: "systems/friends_system.php",
data:{type: type, user, <?php echo json_encode($log_username);?>}
}).done(function(r){
if(r.charAt(0) == "_"){
window.location = "message.php?msg=" + r;
}else{
_("id").style.display = "none";
}
});
}
</script>
Onclick is a html event, and consider that the Click001 is a function, so call it with it's parentheses:
...button id="001" onclick="Click001()">...
you need to call your function, also this is a better use of js
while($row = mysqli_fetch_row($query)){
$result .= '
<script>
function Click(accept)
{
if(accept){
answer("'.$DOMid.'","'.$row[2].'", "accept");
}else{
answer("'.$DOMid.'","'.$row[2].'", "decline");
}
}
</script>
<div id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
<p>
Freundschaftsanfrage von: '.$row[2].'
</p>
<button id = "'.$DOMid.'01" onclick="Click(true)">Accept</button>
<button id = "'.$DOMid.'02" onclick="Click(false)">Decline</button>
</div>
';
$DOMid = $DOMid+1;
}
$result .= '<script>
function answer(id, user, type){
$.ajax({
method: "POST",
url: "systems/friends_system.php",
data:{type: type, user, <?php echo json_encode($log_username);?>}
}).done(function(r){
if(r.charAt(0) == "_"){
window.location = "message.php?msg=" + r;
}else{
_("id").style.display = "none";
}
});
}
</script>';
echo $result;
I reinvented the Code
It looks like this now:
$result .= '
<div id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; height: 105px; padding:10px; border: 1px solid #0f0f0a;">
<p style = "height: 75px;">
<span style = "line-height: 75px; margin: auto 2px;">
Freundschaftsanfrage von: '.$row[2].'
</span>
<span style = "line-height: 75px; margin: auto 2px;">
<img src = "/user/'.$row[2].'/profile_pic.png" height = 60px width = 50px alt= "'.$row[2].'">
</span>
</p>
<button id = "'.$DOMid.'01" onclick="answer('.$DOMid.', \''.$row[2].'\', \'accept\')">Accept</button>
<button id = "'.$DOMid.'02" onclick="answer('.$DOMid.', \''.$row[2].'\', \'decline\')">Decline</button>
</div>';
every JavaScript is now in the original file and takes just parameters.
No Generic Javascript needed.

Fixing a simple slider

I'm trying to figure out how i can set the slider to stop at the last item. Basically the slider still slides to left even though their aren't anymore items to follow. Here is the link to my site.
http://federalland.ph/
The slider is located below the video presentation. Here is my code
HTML/PHP
<!--SLIDER POST-->
<div class="row slider_post_container ">
<div class="arrow_left">
<input id="slide_right" type="button" value="Prev">
</div>
<div class="slide_post">
<div class="slide_post_wrap">
<?php query_posts('posts_per_page=9&cat=4');; if(have_posts()) : while(have_posts()) :the_post(); ?>
<div class="slider_post">
<h2><a class="post_title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="post_thumbnail">
<?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" alt="' . the_title_attribute('echo=0') . '">'; } ?>
</div>
<?php the_excerpt(); ?>
<a class="read_more" href="<?php echo get_permalink(); ?>" title="Read More">Read More</a>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
</div>
<div class="arrow_right">
<input id="slide_left" type="button" value="Next">
</div>
<div class="row-end"> </div>
</div>
<!--END SLIDER POST -->
CSS
.slider_post_container{
background-image:url(images/slide_background.png);
background-repeat:no-repeat;
padding:80px 0px 50px 0px;
}
.arrow_left{float:left; width:100px;}
.arrow_right{float:left; width:100px;}
input#slide_left{
background-image:url(images/slider_buttons.png);
background-color:transparent;
background-position:-60px 0px;
display:block; border:0px;
height:61px;
margin:150px auto 0px;
position:relative;
text-indent:-99999px;
width:60px;
}
input#slide_right{
background-image:url(images/slider_buttons.png);
background-color:transparent;
background-position:0px 0px;
display:block; border:0px;
height:61px;
margin:150px auto 0px;
text-indent:-99999px;
width:60px;
}
.slide_post{
float:left;
overflow:hidden;
width:1000px;
}
.slide_post_wrap{min-width:5000px; float:left}
.slider_post{
float:left;
margin:0 10px;
position:relative;
width:230px;
}
.slider_post h2{margin-bottom:10px; height:40px}
.slider_post a.post_title{
color:black;
font-size:20px;
font-family:'Quicksand', sans-serif;
text-decoration:none;
font-weight:normal;
}
.slider_post .post_thumbnail{width:230px; margin-bottom:10px}
.slider_post .post_thumbnail img{max-width:230px; overflow:hidden;}
.slider_post p{margin-bottom:10px; font-size:12px; height:140px}
a.read_more{
color:#2e3192;
font-family: 'Arial', sans-serif;
font-weight: bold;
font-size: 14px;
text-decoration:none;
text-transform:uppercase;
}
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
var $item = $('div.slider_post'),
visible = 1,
index = 0,
endIndex = ( $item.length / visible ) -1
$('input#slide_left').click(function(){
if(index < endIndex ){
index++;
$item.animate({'left':'-=235px'});
}
});
$('input#slide_right').click(function(){
if(index > 0){
index--;
$item.animate({'left':'+=235px'});
}
});
});
</script>
You are calculating the width of your slides incorrectly, as you are neglecting the margin.
Either hard code them as suggested by #BenR, or determine the width programatically:
var w = $item.outerWidth( true );
$item.animate({'left':'-=' + w + 'px'});
$item.animate({'left':'+=' + w + 'px'});
Also, to have the slide stop at the last slide, you will have to change your end index variable.
You can either hard code this as 5, or do it programatically:
endIndex = $item.length - Math.floor($(".slide_post").width()/w);
Here's everything together:
var $item = $('div.slider_post'),
w = $item.outerWidth( true ),
visible = 1,
index = 0,
endIndex = $item.length - Math.floor($(".slide_post").width()/w);
$('input#slide_left').click(function(){
if(index < endIndex ){
index++;
$item.animate({'left':'-=' + w + 'px'});
});
$('input#slide_right').click(function(){
if(index > 0){
index--;
$item.animate({'left':'+=' + w + 'px'});
}
});
Here's a demo of it working.
Might be a css issue.
Put the width of the slider to 100% or if its static,just adjust the width such that it doesnt exceed the contents of the slider.
You don't slide enough : your items are 250px wide not 235 (you forgot the margin).
Also endIndex is equal to 8 instead of 5 : you have to set it to $item.length - (number of item visible).
$(document).ready(function() {
var $item = $('div.slider_post'),
visible = 1,
index = 0,
endIndex = 5;
$('input#slide_left').click(function() {
if (index < endIndex) {
index++;
$item.animate({
'left': '-=250px'
});
}
});
$('input#slide_right').click(function() {
if (index > 0) {
index--;
$item.animate({
'left': '+=250px'
});
}
});
});

Categories

Resources