JQUERY scroller content - php

I have a page with content that came from my database, but I want to be able to show that content like this http://www.htmldrive.net/items/show/244/Amazon-style-image-and-title-scroller-with-jQuery I've downloaded the script and I did (I think) like the tutorial, but it's not working at all. I'm sure I'm doing something stupid, but I don't know what.
<link href="css/amazon_scroller.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/amazon_scroller.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#amazon_scroller").amazon_scroller({
scroller_title_show: 'enable',
scroller_time_interval: '0',
scroller_window_background_color: "#CCC",
scroller_window_padding: '10',
scroller_border_size: '1',
scroller_border_color: '#000',
scroller_images_width: '150',
scroller_images_height: '100',
scroller_title_size: '12',
scroller_title_color: 'black',
scroller_show_count: '2',
directory: 'images'
});
});
</script>
<div id="amazon_scroller1" class="amazon_scroller">
<div class="amazon_scroller">
<div class="amazon_scroller_mask">
<ul>
<li>
<?php do { ?>
<div align="center" id="thumb"><img src="../legendofgames/documentos/games/<?php echo $row_GameData['strImage']; ?>" width="165" height="120"/>
<div align="center" id="gametext"><?php echo $row_GameData['strNome']; ?> </div>
</div>
<?php } while ($row_GameData = mysql_fetch_assoc($GameData)); ?>
</div>
</li>
</ul>
</div>
<ul class="amazon_scroller_nav">
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
</div>

The example code put each item (link + image) in a <li> while your code puts all item in the same <li>. Try:
<div id="amazon_scroller1" class="amazon_scroller">
<div class="amazon_scrolle r">
<div class="amazon_scroller_mask">
<ul>
<?php do { ?>
<li>
<div align="center" id="thumb"><img src="../legendofgames/documentos/games/<?php echo $row_GameData['strImage']; ?>" width="165" height="120"/>
<div align="center" id="gametext"><?php echo $row_GameData['strNome']; ?> </div>
</div>
</li>
<?php } while ($row_GameData = mysql_fetch_assoc($GameData)); ?>
</ul>
</div>
</div>
<ul class="amazon_scroller_nav">
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
</div>

Related

My pictures don't show up in my index.php file

I am creating a shopping cart in mySQLi and PHP. I inserted the products with images into PhpMyAdmin (I typed - zdjecia/photo.png in the zdjecie_produktu)
This is my code for this part in PHP. I am only starting PHP and I've been following this tutorial https://www.youtube.com/watch?v=ka2ea2LL36g. Everything seems to work fine, just these pictures don't show up :(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favico.png" />
</head>
<body>
<section class="home">
<div class="slider">
<div class="slide active" id="slide" style="background-image: url(tlo1.jpg)" ><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav class="indeksik">
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="nowysklep">NOWY SKLEP</h1>
<p>Świece Caroline Homemade Candles to nowa marka domowych świec zapachowych. Nasze świece produkowane są ręcznie w zaciszu domowym z naturalnego wosku sojowego.</p>
Kup teraz
</div>
</div>
</div>
</div>
<div class="slide" id="slide" style="background-image: url(tlo2.jpg)"><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav>
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="darmowa">DARMOWA DOSTAWA OD 100ZŁ</h1>
<p>Darmowa dostawa już od 100zł.<br> Dostępny Kurier/Paczkomaty Inpost.</p>
</div>
</div>
</div>
</div>
<div class="slide" id="slide" style="background-image: url(tlo3.jpg)" ><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav>
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="przyjemnosc">ŚWIAT PRZYJEMNOŚĆI</h1>
<p>Świece Caroline Homemade Candles są naturalne jak i również ekologiczne. Swój produkt tworzymy z pasją i zamiłowaniem. Zapraszamy Cię do naszego świata przyjemności</p>
Kup teraz
</div>
</div>
</div>
</div>
</div>
<div class="controls">
<div class="prev"><</div>
<div class="next">></div>
</div>
<div class="indicator">
</div>
</section>
<!-----featured categories ------->
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="categories-1.png">
</div>
<div class="col-3">
<img src="categories-2.png">
</div>
<div class="col-3">
<img src="categories-3.png">
</div>
</div>
</div>
</div>
<!----- featured products----->
<div class="container">
<div class="row">
<?php
include 'config.php';
$stmt = $conn->prepare("SELECT * FROM product");
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc());
?>
<div class="col-lg-3">
<div class="card-deck">
<div class="card p-2 border-secondary mb-2">
<img src="<?= $row['zdjecie_produktu'] ?>" class="card-img-top" height="250">
</div>
</div>
</div>
<?php T_ENDWHILE ?>
</div>
</div>
<!----- footer ----->
<footer>
<div class="column">
<ul class="footer-links-main">
<li>O nas</li>
<li>Produkty</li>
<li>Regulamin</li>
<li>Kontakt</li>
<li>FAQ</li>
</ul>
</div>
<div class="footer-sm">
<div class="column2">
<h3 class="kontakth3">Kontakt</h3>
<p class="kontaktp">Adres e-mail:xxx</p>
<p class="kontaktp">Numer telefonu:xxx</p>
</div>
</div>
</footer>
<!---- js for toggle menu--->
<script>
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
function menutoggle(){
if (MenuItems.style.maxHeight == "0px")
{
MenuItems.style.maxHeight = "200px";
}
else
{
MenuItems.style.maxHeight = "0px";
}
}
</script>
<script src="main.js"></script>
<script src="https://unpkg.com/ionicons#5.2.3/dist/ionicons.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
The code has no errors and a default broken image icon shows up instead of pictures.
and this is my config.php
<?php
$conn = new mysqli("localhost","root","","cart_system");
if($conn->connect_error){
die("Connection Failed".$conn->connect_error);
}
?>

Tab content with next & privious options

<script src="http://tympanus.net/Development/TabStylesInspiration/js/modernizr.custom.js"></script>
<link href="http://tympanus.net/Development/TabStylesInspiration/css/tabs.css" rel="stylesheet"/>
<link href="http://tympanus.net/Development/TabStylesInspiration/css/tabstyles.css" rel="stylesheet"/>
<section>
<div class="tabs tabs-style-line">
<div class="content-wrap">
<a href="javascript(0);" class="prev">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-prev.png">
</a>
<a href="javascript(0);" class="next">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-next.png">
</a>
<section id="section-line-1"><p>1</p></section>
<section id="section-line-2"><p>2</p></section>
<section id="section-line-3"><p>3</p></section>
<section id="section-line-4"><p>4</p></section>
<section id="section-line-5"><p>5</p></section>
</div><!-- /content -->
<nav>
<ul>
<li><span>Our Controls</span></li>
<li><span>Sony Playstation 4</span></li>
<li><span>Microsoft Xbox One</span></li>
<li><span>Nintendo Wii U</span></li>
<li><span>Microconsoles</span></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
<script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('.tabs')).forEach(function(el) {
new CBPFWTabs(el);
});
})();
</script>
Tab Styles Inspiration
Tab content work fine but how to add next previous option on this
inspiration.
check this solution:
http://jsfiddle.net/bpzat7r0/3/
Pay attention to add ID attribute for div (.tabs) and nav link (.prev and .next)
HTML:
<section>
<div class="tabs tabs-style-line" id="tab1">
<div class="content-wrap">
<a href="javascript:" class="prev" id="prev1">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-prev.png">
</a>
<a href="javascript:" class="next" id="next1">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-next.png">
</a>
<section id="section-line-1"><p>1</p></section>
<section id="section-line-2"><p>2</p></section>
<section id="section-line-3"><p>3</p></section>
<section id="section-line-4"><p>4</p></section>
<section id="section-line-5"><p>5</p></section>
</div><!-- /content -->
<nav>
<ul>
<li><span>Our Controls</span></li>
<li><span>Sony Playstation 4</span></li>
<li><span>Microsoft Xbox One</span></li>
<li><span>Nintendo Wii U</span></li>
<li><span>Microconsoles</span></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
JAVASCRIPT EDIT:
var $t=new CBPFWTabs(document.getElementById( 'tab1' ) )
document.getElementById('prev1').onclick=function(){
var current=$t.current;
var count=$t.items.length;
current--;
if(current<0) current=count-1;
$t._show(current);
};
document.getElementById('next1').onclick=function(){
var current=$t.current;
var count=$t.items.length;
current++;
if(current>=count) current=0;
$t._show(current);
};

how to add pop banner on page load on wordpress site?

I have the ad code.
<div id='div-gpt-ad-1373299297661-0-oop'>
<script type='text/javascript'>
googletag.display('div-gpt-ad-1373299297661-0-oop');
</script>
</div>
where should I add this to pop up on page load.
I added this code on the header.php file, under the <body> tag.
but it shows on the top of header.it should be pop up in the middle of the page.
header.php
<body <?php body_class();?> itemscope="itemscope" itemtype="http://schema.org/WebPage">
<!-- 450x450 -->
<!-- Overylay Banner -->
<div id='div-gpt-ad-1373299297661-0-oop'>
<script type='text/javascript'>
googletag.display('div-gpt-ad-1373299297661-0-oop');
</script>
</div>
<?php
if(of_get_option('full_or_boxed_layout')!= 'full_image_option'){
if(of_get_option('background_body_option')== 'big_image'){?>
<img alt="full screen background image" src="<?php echo of_get_option('background_large_image');?>" id="full-screen-background-image" />
<?php }}?>
<div id="content_nav">
<div id="nav">
<?php $top_menu = array('theme_location' => 'Top_Menu', 'container' => '', 'menu_class' => 'menu-top-menu-sf', 'menu_id' => '', 'fallback_cb' => false); wp_nav_menu($top_menu);?>
<?php $main_menu = array('theme_location' => 'Main_Menu', 'container' => '', 'menu_class' => '', 'menu_id' => '', 'fallback_cb' => false, 'link_after'=>'<span class="border-menu"></span>'); wp_nav_menu($main_menu);?>
</div>
</div>
<?php if(of_get_option('full_or_boxed_layout') == 'box_image_option'){ if(of_get_option('background_option') == 'background_image'){?>
<div class="full-background"><img src="<?php echo of_get_option('background_large_image');?>" alt="" /></div>
<?php }}?>
<div id="sb-site" class="<?php if(of_get_option('full_or_boxed_layout') == 'full_image_option'){echo "body_wraper_full";}else{echo "body_wraper_box";}?>">
<div>
</div>
<!-- Start header -->
<header class="header-wraper">
<div class="header_top_wrapper">
<?php $main_top = array('theme_location' => 'Top_Menu', 'container' => '', 'menu_class' => 'sf-top-menu', 'menu_id' => 'menu-top', 'fallback_cb' => false);?>
<div class="row <?php if($main_top == "" || !of_get_option('disable_top_menu')==0){echo "no-top";}?>">
<div class="six columns header-top-left-bar">
<a class="open toggle-lef sb-toggle-left navbar-left" href="#nav">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</a>
<?php if(!of_get_option('disable_top_menu')==1){?>
<div class="mainmenu">
<?php wp_nav_menu($main_top);?>
<div class="clearfix"></div>
</div>
<?php }?>
</div>
<div class="six columns header-top-right-bar">
<?php if(!of_get_option('disable_top_search')==1){?>
<div id="search_block_top">
<form id="searchbox" action="<?php echo home_url(); ?>" method="GET" role="search">
<p>
<input type="text" id="search_query_top" name="s" class="search_query ac_input" value="" placeholder="<?php _e('Search here', 'jelly_text_main'); ?>">
<a class="button_search" href="javascript:document.getElementById('searchbox').submit();"></a>
</p>
</form>
<span>Search</span>
<div class="clearfix"></div>
</div>
<?php }?>
<?php if(!of_get_option('disable_top_header_date')==1){?>
<div class="clock">
<i class="fa fa-clock-o"></i>
<div id="Date">
<?php
/*setlocale(LC_TIME, "pt_BR");
$currDate = strftime("%e %B, %Y, %H:%M");
echo $currDate;*/
?>
<?php echo date('l j F Y'); //setlocale(LC_TIME, "de_DE"); echo strftime('%A %d %B %Y');?></div>
<ul>
<li id="hours"></li>
<li class="point">:</li>
<li id="min"></li>
<li class="point">:</li>
<li id="sec"></li>
</ul>
</div>
<?php }?>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="header_main_wrapper">
<div class="row">
<div class="<?php if (is_active_sidebar('banner-sidebar')) { echo'four columns header-top-left'; } else { echo'twelve columns logo-position';}?>">
<!-- begin logo -->
<a href="<?php echo home_url(); ?>">
<?php $logo = of_get_option('logo_uploader'); ?>
<?php if (!empty($logo)): ?>
<img src="<?php echo $logo; ?>" alt="<?php bloginfo('description'); ?>"/>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo('description'); ?>"/>
<?php endif; ?>
</a>
<!-- end logo -->
</div>
<?php if (is_active_sidebar('banner-sidebar')){ ?>
<div class="eight columns header-top-right">
<?php dynamic_sidebar('banner-sidebar');?>
</div>
<?php }?>
</div>
</div>
<!-- end header, logo, top ads -->
<!-- Start Main menu -->
so where is should I place the ad code?
is it possible to add the overlay banner via text widget? without editing the header.php??
to load something on page load, you need to add it to the <body> tag itself like this:
<body onLoad="callJSFunction()">
.
.
.
</body>
take a look at this tutorial :D

Coding lines appear after each closed div. (only in DOM inspector)

I had some very strange annoying results while working on my 'project'.
To loop through MySQL results I used a while loop.
One of the lines echo'ed in the while loop now keeps appearing after every closed div.
This is only visible in firebug or another DOM inspector and not in the source code.
I have no idea what is causing it, so any help is appreciated.
Underneath I included all the code involved.
Thanks,
Sam
Btw. This is still in early development so please take that into consideration.
Code:
Firebug:
<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<li id="nav1" class="active tip-right" style="height: auto;" data-original-title="Dashboard">
<li id="nav2" class="tip-right" style="height: auto;" data-original-title="Forms">
<li id="nav3" class="tip-right" style="height: auto;" data-original-title="UI Elements">
<li id="nav4" class="tip-right" style="height: auto;" data-original-title="Typography">
<li id="nav5" class="tip-right" style="height: auto;" data-original-title="Tables">
<li id="nav6" class="tip-right" style="height: auto;" data-original-title="Gallery">
<li id="nav7" class="tip-right" style="height: auto;" data-original-title="Grid">
<li id="nav8" class="tip-right" style="height: auto;" data-original-title="Charts">
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</ul>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
<div id="canvas" class="content_wrapper">This page was loaded succesfully :D</div>
<div id="loading_modal" class="modal hide fade">
</a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
</body>
</html>
Php File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Sam Kool">
<title>Admin panel</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="../css/style.css"/>
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet"><![endif]--><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body onLoad="prepare()">
<?php
session_start();
if(!isset($_SESSION['name'])){
header('Location: http://localhost/CMS/Admin/');
}
include ('../config.php');
?>
<div class="highligts_content">
<div class="container-fluid">
<div class="stats">
<div class="row-fluid">
<div class="span12">
<div class="statistics">
<ul class="quickstats">
<?php
$conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
$conn = mysql_select_db($config['db_db']);
$mysql['sql'] = " SELECT *
FROM admin_layout
WHERE enabled = '1' and type = 'quickstats'
";
$mysql['query'] = mysql_query($mysql['sql']);
while($row = mysql_fetch_array($mysql['query'])){
echo '<li> <img src="../img/icons/'.$row["image"].'" alt=""> <span>'.$row["title"].'</span> </li>';
}
mysql_close();
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<?php
$i = 1;
$conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
$conn = mysql_select_db($config['db_db']);
$mysql['sql'] = " SELECT *
FROM admin_components
WHERE enabled = '1'
";
$mysql['query'] = mysql_query($mysql['sql']);
while($row = mysql_fetch_assoc($mysql['query'])){
echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">';
echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>';
$i ++;
}
mysql_close();
?>
</ul>
</div>
</div>
<div class="content_wrapper" id="canvas">
</div>
<div class="modal hide fade" id="loading_modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Loading....</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function load_page(id, component){
if($('#'+id).attr('class') == 'active tip-right'){
alert('nope');
return;
}
$('.navigation li').each(function(i){
var myClass = $(this).attr("class");
if(myClass == 'active tip-right'){
$(this).attr('class', 'tip-right');
}
});
$('#'+id).attr('class', 'active tip-right');
$('#loading_modal').modal('show');
setTimeout(function(){
$('#canvas').load('/SCMS/admin/components/'+component, function(){
$('#loading_modal').modal('hide');
});
},1000);
}
function prepare(){
$('#nav1').attr('class', 'active tip-right');
$('#canvas').load('/SCMS/admin/components/dashboard.php');
$('#loading_screen').modal({
keyboard: false,
hide: true
})
}
</script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
</body>
</html>
The DOM inspector is almost always correct, your HTML source is wrong. When things like this happen, it usually indicates you forgot to close a tag, or that you closed them in the wrong order.
This is an extremely easy mistake to make when echoing out html, because you dont usually have indentation or IDE color coding to help you out.
In your second while loop, it appears you opened an a tag and didnt echo out the closing tag.
echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
//OPENED AN A TAG HERE
echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">';
echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>';
//OOPS, ENDED LI WITHOUT ENDING A

Php file renders blank after being converted with Haml (Ruby)!

In order to test if the converted index.haml would work on with my wamp and localhost i did the following:
First, I renamed my index.php into index.html
Then, I typed html2haml index.html index.haml in the command line
Then, I typed haml index.haml indexnew.html in the command line
I renamed indexnew.html to indexnew.php
I tested it: localhost/projects/cross-browser/base0.9/indexnew.php
but the indexnew.php was rendered blank even if the code inside is ok:
Original Php (index.php):
<?php
include_once 'localization.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Alex Chen - Web Development, Graphic Design, and Translation</title>
<link rel="stylesheet" type="text/css" href="styles/reset.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" />
<?php if($lang_file=='lang.zh-tw.php' || $lang_file=='lang.zh-cn.php') {echo '<link rel="stylesheet" type="text/css" href="styles/chinese.css" />';} ?>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
<?php if($lang_file=='lang.en.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-en.js"></script>';} ?>
<?php if($lang_file=='lang.es.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-es.js"></script>';} ?>
<?php if($lang_file=='lang.zh-tw.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-zh-tw.js"></script>';} ?>
<?php if($lang_file=='lang.zh-cn.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-zh-cn.js"></script>';} ?>
</head>
<body id="home">
<div id="header">
<div class="container">
<div id="banner">
<ul id="lang">
<li <?php if($lang_file=='lang.en.php') {echo 'class="current"';} ?>>ENGLISH</li>
<li <?php if($lang_file=='lang.es.php') {echo 'class="current"';} ?>><?php echo l('nav_a0'); ?></li>
<li <?php if($lang_file=='lang.zh-tw.php') {echo 'class="current"';} ?>><?php echo l('nav_a1'); ?></li>
<li <?php if($lang_file=='lang.zh-cn.php') {echo 'class="current"';} ?>><?php echo l('nav_a2'); ?></li>
</ul>
<div id="logo">
<h1><a>ALEXCHEN</a></h1>
</div>
<div id="logo2">
<ul id="nav">
<li><?php echo l('nav1'); ?></li>
<li><?php echo l('nav2'); ?></li>
</ul>
</div>
<div id="logo3">
</div>
</div><!-- #header-bottom -->
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<div class="showcase">
<div class="first">
<div id="nopic">
<p><?php echo l('tagline_p'); ?></p>
</div>
</div>
<div class="pusher">
<h3><?php echo l('showcase1_h3'); ?></h3>
<p><?php echo l('showcase1_p'); ?></p>
<div class="pic">
<a id="showcase1" href="#inline1"><img src="images/showcase1t.png"/></a>
<div id="inline1">
<img src="images/showcase1.png"/>
studyatbest.com
</div>
</div>
</div>
<div class="pusher">
<h3><?php echo l('showcase2_h3'); ?></h3>
<p><?php echo l('showcase2_p'); ?></p>
<div class="pic">
<a id="showcase2" href="#inline2"><img src="images/showcase2t.png"/></a>
<div id="inline2">
<img src="images/showcase2.png"/>
spacestudios.com
</div>
</div>
</div><!-- .pushed -->
<div class="pusher">
<h3><?php echo l('showcase3_h3'); ?></h3>
<p><?php echo l('showcase3_p'); ?></p>
<div class="pic">
<a id="showcase3" href="#inline3"><img src="images/showcase3t.png"/></a>
<div id="inline3">
<img src="images/showcase3.png"/>
alexchen.com
</div>
</div>
</div>
<div class="pusher">
<h3><?php echo l('showcase4_h3'); ?></h3>
<p><?php echo l('showcase4_p'); ?></p>
<div class="pic">
<a id="showcase4" href="#inline4"><img src="images/showcase4t.png"/></a>
<div id="inline4">
<img src="images/showcase4.png"/>
mattsai.com
</div>
</div>
</div>
<div class="pusher">
<h3><?php echo l('showcase5_h3'); ?></h3>
<p><?php echo l('showcase5_p'); ?></p>
<div class="pic">
<a id="showcase5" href="#inline5"><img src="images/showcase5t.png"/></a>
<div id="inline5">
<img src="images/showcase5.png"/>
mattsai.com
</div>
</div>
</div><!-- .pusher -->
<div class="pusher">
<h3><?php echo l('showcase6_h3'); ?></h3>
<p><?php echo l('showcase6_p'); ?></p>
<div class="pic">
<a id="showcase6" href="#inline6"><img src="images/showcase6t.png"/></a>
<div id="inline6">
<img src="images/showcase6.png"/>
mattsai.com
</div>
</div>
</div>
<div class="pusher">
<h3><?php echo l('showcase8_h3'); ?></h3>
<p><?php echo l('showcase8_p'); ?></p>
<div class="pic">
<a id="showcase8" href="#inline8"><img src="images/showcase8t.png"/></a>
<div id="inline8">
<img src="images/showcase8.png"/>
mattsai.com
</div>
</div>
</div><!-- .pusher -->
</div><!-- .showcase -->
</div><!-- .container -->
</div><!-- #work -->
<div id="footer">
<div class="container">
<div id="footer-top">
<div id="about">
<h3><?php echo l('about_h3'); ?></h3>
<p><?php echo l('about_p'); ?></p>
</div>
<div id="info">
<h3><?php echo l('info_h3'); ?></h3>
<ul>
<li id="tel"><?php echo l('_info_li2'); ?><p>Tel:</p> 0918051170</li>
<li id="gmail"><?php echo l('_info_li3'); ?><p></p>alexchen.net#gmail.com</li>
<li id="facebook"><?php echo l('_info_li4'); ?> facebook</li>
</ul>
</div>
<div id="contact">
<h3><?php echo l('contact_h3'); ?></h3>
<p><?php echo l('_contact_p'); ?></p>
<form id="sendmail" method="post" action="http://www.emailmeform.com/fid.php?formid=254816">
<label for="name"><?php echo l('form_label1'); ?></label>
<input type="text" id="name" name="FieldData0" />
<label for="email"><?php echo l('form_label2'); ?></label>
<input type="text" id="email" name="FieldData1" />
<label for="message"><?php echo l('form_label3'); ?></label>
<textarea type="text" id="message" name="FieldData2"></textarea>
<input id="button" type="submit" value="<?php echo l('submit'); ?>">
</form>
</div>
</div><!-- #footer-top -->
<div id="footer-bottom">
<p>Copyright © 2010 Alex Chen. All Rights Reserved. Hosted on Zymic. Contact form hosted on Email Me Form.<a id="nr" href="http://www.freedomain.co.nr/cheap_web_hosting.php" target="_blank"><img src="http://ruarmza.4u.com.ru/ch.gif" alt="Cheap Web Hosting Providers" width="88" height="31" border="0" /></a></p>
</div>
</div><!-- .container -->
</div><!-- #footer -->
<script type="text/javascript" src="scripts/google-analytics.js"></script>
<script type="text/javascript" src="scripts/page-tracker.js"></script>
</body>
</html>
Converted Php (indexnew.php):
<?php include_once 'localization.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible' />
<title>Alex Chen - Web Development, Graphic Design, and Translation</title>
<link href='styles/reset.css' rel='stylesheet' type='text/css' />
<link href='styles/global.css' rel='stylesheet' type='text/css' />
<link href='fancybox/jquery.fancybox-1.3.1.css' rel='stylesheet' type='text/css' />
<?php if($lang_file=='lang.zh-tw.php' || $lang_file=='lang.zh-cn.php') {echo '<link rel="stylesheet" type="text/css" href="styles/chinese.css" ?>
';} ?>
<script src='scripts/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='scripts/jquery.validate.js' type='text/javascript'></script>
<script src='fancybox/jquery.fancybox-1.3.1.pack.js' type='text/javascript'></script>
<script src='scripts/jquery.scrollTo-min.js' type='text/javascript'></script>
<script src='scripts/jquery.localscroll-min.js' type='text/javascript'></script>
<script src='scripts/custom.js' type='text/javascript'></script>
<?php if($lang_file=='lang.en.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-en.js?>
';} ?>
<?php if($lang_file=='lang.es.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-es.js?>
';} ?>
<?php if($lang_file=='lang.zh-tw.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-zh-tw.js?>
';} ?>
<?php if($lang_file=='lang.zh-cn.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-zh-cn.js?>
';} ?>
</head>
<body id='home'>
<div id='header'>
<div class='container'>
<div id='banner'>
<ul id='lang'>
<li
<?php if($lang_file=='lang.en.php') {echo 'class="current"';} ?>
>
</ul>
<a href='index.php?lang=en'>ENGLISH</a>
<li
<?php if($lang_file=='lang.es.php') {echo 'class="current"';} ?>
>
<a href='index.php?lang=es'>
<?php echo l('nav_a0'); ?>
</a>
<li
<?php if($lang_file=='lang.zh-tw.php') {echo 'class="current"';} ?>
>
<a href='index.php?lang=zh-tw'>
<?php echo l('nav_a1'); ?>
</a>
<li
<?php if($lang_file=='lang.zh-cn.php') {echo 'class="current"';} ?>
>
<a href='index.php?lang=zh-cn'>
<?php echo l('nav_a2'); ?>
</a>
<div id='logo'>
<h1>
<a>ALEXCHEN</a>
</h1>
</div>
<div id='logo2'>
<ul id='nav'>
<li>
<a href='#content'>
<?php echo l('nav1'); ?>
</a>
</li>
<li>
<a href='#contact'>
<?php echo l('nav2'); ?>
</a>
</li>
</ul>
</div>
<div id='logo3'></div>
</div>
<!-- #header-bottom -->
</div>
<!-- .container -->
</div>
<!-- #header -->
<div id='content'>
<div class='container'>
<div class='showcase'>
<div class='first'>
<div id='nopic'>
<p>
<?php echo l('tagline_p'); ?>
</p>
</div>
</div>
<div class='pusher'>
<h3>
<?php echo l('showcase1_h3'); ?>
</h3>
<p>
<?php echo l('showcase1_p'); ?>
</p>
<div class='pic'>
<a href='#inline1' id='showcase1'>
<img src='images/showcase1t.png' />
</a>
<div id='inline1'>
<img src='images/showcase1.png' />
<a href='http://studyatbest.com'>studyatbest.com</a>
</div>
</div>
</div>
<div class='pusher'>
<h3>
<?php echo l('showcase2_h3'); ?>
</h3>
<p>
<?php echo l('showcase2_p'); ?>
</p>
<div class='pic'>
<a href='#inline2' id='showcase2'>
<img src='images/showcase2t.png' />
</a>
<div id='inline2'>
<img src='images/showcase2.png' />
<a href='http://studyatbes.com'>spacestudios.com</a>
</div>
</div>
</div>
<!-- .pushed -->
<div class='pusher'>
<h3>
<?php echo l('showcase3_h3'); ?>
</h3>
<p>
<?php echo l('showcase3_p'); ?>
</p>
<div class='pic'>
<a href='#inline3' id='showcase3'>
<img src='images/showcase3t.png' />
</a>
<div id='inline3'>
<img src='images/showcase3.png' />
<a href='http://studyatbes.com'>alexchen.com</a>
</div>
</div>
</div>
<div class='pusher'>
<h3>
<?php echo l('showcase4_h3'); ?>
</h3>
<p>
<?php echo l('showcase4_p'); ?>
</p>
<div class='pic'>
<a href='#inline4' id='showcase4'>
<img src='images/showcase4t.png' />
</a>
<div id='inline4'>
<img src='images/showcase4.png' />
<a href='http://studyatbes.com'>mattsai.com</a>
</div>
</div>
</div>
<div class='pusher'>
<h3>
<?php echo l('showcase5_h3'); ?>
</h3>
<p>
<?php echo l('showcase5_p'); ?>
</p>
<div class='pic'>
<a href='#inline5' id='showcase5'>
<img src='images/showcase5t.png' />
</a>
<div id='inline5'>
<img src='images/showcase5.png' />
<a href='http://studyatbes.com'>mattsai.com</a>
</div>
</div>
</div>
<!-- .pusher -->
<div class='pusher'>
<h3>
<?php echo l('showcase6_h3'); ?>
</h3>
<p>
<?php echo l('showcase6_p'); ?>
</p>
<div class='pic'>
<a href='#inline6' id='showcase6'>
<img src='images/showcase6t.png' />
</a>
<div id='inline6'>
<img src='images/showcase6.png' />
<a href='http://studyatbes.com'>mattsai.com</a>
</div>
</div>
</div>
<div class='pusher'>
<h3>
<?php echo l('showcase8_h3'); ?>
</h3>
<p>
<?php echo l('showcase8_p'); ?>
</p>
<div class='pic'>
<a href='#inline8' id='showcase8'>
<img src='images/showcase8t.png' />
</a>
<div id='inline8'>
<img src='images/showcase8.png' />
<a href='http://studyatbes.com'>mattsai.com</a>
</div>
</div>
</div>
<!-- .pusher -->
</div>
<!-- .showcase -->
</div>
<!-- .container -->
</div>
<!-- #work -->
<div id='footer'>
<div class='container'>
<div id='footer-top'>
<div id='about'>
<h3>
<?php echo l('about_h3'); ?>
</h3>
<p>
<?php echo l('about_p'); ?>
</p>
</div>
<div id='info'>
<h3>
<?php echo l('info_h3'); ?>
</h3>
<ul>
<li id='tel'>
<?php echo l('_info_li2'); ?>
<p>Tel:</p>
0918051170
</li>
<li id='gmail'>
<?php echo l('_info_li3'); ?>
<p></p>
<a href='mailto:janoochen#gmail.com'>alexchen.net#gmail.com</a>
</li>
<li id='facebook'>
<?php echo l('_info_li4'); ?>
<a href='http://www.facebook.com/weedd.chen'>facebook</a>
</li>
</ul>
</div>
<div id='contact'>
<h3>
<?php echo l('contact_h3'); ?>
</h3>
<p>
<?php echo l('_contact_p'); ?>
</p>
<form action='http://www.emailmeform.com/fid.php?formid=254816' id='sendmail' method='post'>
<label for='name'>
<?php echo l('form_label1'); ?>
</label>
<input id='name' name='FieldData0' type='text' />
<label for='email'>
<?php echo l('form_label2'); ?>
</label>
<input id='email' name='FieldData1' type='text' />
<label for='message'>
<?php echo l('form_label3'); ?>
</label>
<textarea id='message' name='FieldData2' type='text'></textarea>
<input id='button' type='submit' value="<?php echo l('submit'); ?>" />
</form>
</div>
</div>
<!-- #footer-top -->
<div id='footer-bottom'>
<p>
Copyright © 2010 Alex Chen. All Rights Reserved. Hosted on
<a href='http://www.zymic.com'>Zymic</a>.
Contact form hosted on
<a href='http://www.emailmeform.com'>Email Me Form</a>.
<a href='http://www.freedomain.co.nr/cheap_web_hosting.php' id='nr' target='_blank'>
<img alt='Cheap Web Hosting Providers' border='0' height='31' src='http://ruarmza.4u.com.ru/ch.gif' width='88' />
</a>
</p>
</div>
</div>
<!-- .container -->
</div>
<!-- #footer -->
<script src='scripts/google-analytics.js' type='text/javascript'></script>
<script src='scripts/page-tracker.js' type='text/javascript'></script>
</body>
</html>
Any suggestions?
I'd suggest you try a PHP-specific version of HAML, like PHPHaml or pHAML. The Ruby HAML interpreter is specifically expecting Ruby code, and will likely screw up your PHP syntax.
Having said that, I have used Chaml with some degree of success. HAML for PHP is at a rather experimental stage, and you will come across bugs. If you're writing more HTML than PHP though, it can be a great help.

Categories