I have a button that I want to open a panel. Unfortunately my javascript is getting in the way. It's a notifications center in the panel and in order to retrieve the notifications I have to put javascript in the href of the link....but its not opening the open.
I put tags where the problem is that say THIS IS WHERE THE PROBLEM LIES.
If I change the href to #myContent then it will open, but in order for the script to work I need to to be javascript in the href.
Here's my code:
<? //PHP for getting username and database here ?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
}
</script>
<!-- BEGIN PAGE 1 -->
<div data-role="page" id="feed" data-add-back-btn="true">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<!--THIS IS THE LEFT PANEL-->
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<center><img src="images/logo_app_white.png" height="25px"></center>
<!--THIS IS WHERE THE PROBLEM LIES-->
<? echo $number; ?>
</div>
<div data-role="content">
<!--This is where the content of the page goes-->
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<ul>
<li>My Feed</li>
<li>Submit</li>
<li>Browse</li>
<li>Projects</li>
</ul>
</div>
<!-- /navbar -->
</div>
<div data-role="panel" id="myContent" data-position="right" data-display="overlay">
<!--THIS IS THE PANEL-->
</div>
</div>
<!-- END PAGE 1 -->
Why isn't the panel opening and how can I fix the issue.
Why put javascript in the 'href' tag and not in 'onclick'?
My guess is
<a href="javascript:void(0);" onclick="toggleDiv('myContent');">
will fix the issue.
Related
I have tried
<?php session_start(); ?>
.
.
.
<p><?php $_SESSION['loggeduser']; ?>;</p>
I have also tried this JS after the
<script type="text/javascript">
let vuser = '<%= session.getAttribute("loggeduser") %>';
document.getElementById("userid").value= "Not set";
</script>
If someone can tell me what am I doing wrong please!
This is my full body code:
<body>
<section id="MyHeader" style="border:solid red thin;">
<div id="TheHead" style="width:80%; display:inline-block;">
<div id="HeadImg" style="width: 100px; height:100px;">
<a href="main.html">
<img src="../images/icon-redcross.png" alt="AGR">
</a>
</div>
<div id="HeadLegend">
<div id="AGRbrand"><h1>AGR</h1></div>
<div id="quote">
<span style="font-size: small;"><i>Properties catalogue</i></span>
</div>
</div>
</div>
<div id="user" style="display:inline-block; width:12%; height:25px;">
<p id="userid" style="width:100%;"><?php $_SESSION['loggeduser'];?></p>
<script type="text/javascript">
let vuser = '<%= session.getAttribute("loggeduser") %>';
document.getElementById("userid").value= "Not set";
</script>
</div>
<div style="width:100%; display:block;">
<div id="MenuButtons" style="width:80%; display:flex; justify-content:right;">
<div id="newbtn" class="TopButton">New</div>
<div id="exitbtn" class="TopButton">Exit</div>
</div>
</div>
<div class="Subtitle">
<div style="display: flex; justify-content: left; width:100%;">
<h4>Properties</h4>
</div>
</div>
</section>
<div id="Estates" class="pagebreak"></div>
<section id="MyPage">
<div id="Home"></div>
<div class="page" style="width:100%; background-color: white; ">
<div style="display: flex; justify-content:center; width:100%;">
<div class="ServiceBox">
<div class="div-img">
<img src="../../images/house-B.png" alt="AGR">
</div>
<div class="div-info">
</div>
<div class="div-desc">
</div>
<div class="div-btns">
<a class="SideButton" href="Edit.html">Edit</a>
<a class="SideButton" href="Delete.html">Delete</a>
<a class="SideButton" href="pdf-file.html">Pdf</a>
</div>
</div>
</div>
</div>
</section>
</body>
Notes: $_SESSION["loggeduser"] is populated before this page,at the login page; I verified the variable was properly set by a log file I have, and I was able to see the value printed in the log, after the user logs in and before this page is loaded.
Not sure if it is the php version or the goDaddy servers, but in my case the problem was, I was using html extension for the files, I changed them to .php extension and the php code started to work.
I want to redirect the user to a particular section of an html page.
// javascript for owl
$(document).ready(function(){
$('.owl-two').owlCarousel({
loop:true,
margin:10,
nav:true,
autoplay:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
});
<!-- nav-->
<ul class="dropdown-menu">
<li>Hair</li>
<li>Nail</li>
<li>Wax</li>
</ul>
<!-- owl carousel in salon services page-->
<div id="nail" class="row" >
<br>
<br>
<h3 class="text-center">Our Nail Services</h3>
<br>
<!-- nail carousal-->
<div class="owl-two owl-carousel owl-theme">
<div class="item"><img src="images/n1.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Manicure</h4>
</div>
<div class="item"><img src="images/n2.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Pedicure</h4>
</div>
<div class="item"><img src="images/n3.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Nail Painting and Design</h4>
</div>
<div class="item"><img src="images/n4.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Nail Extensions</h4>
</div>
</div>
I want to redirect the user directly from nav dropdown to another page's div containing that content. The page to which I want to redirect has 3 owl carousels.
I have already tried the html id redirect. <a href="#id">, but it does not works completely. The page redirects briefly to the section but scrolls automatically to the top of the page.
I am using the owl carousel and think that owl javascript is the responsible factor for this as I have tested it with removing owl and it works, also the id redirect works fine when done from the same page (i.e.services page ).
I have 3 carousels 1.hair 2.nail 3.wax
Kindly help I want to keep owl and the section redirect function. Thanks.
.sec {
width: 100%;
height: 100vh;
background-color: #ccc;
margin-bottom: 12px;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div id="one" class="sec">
<h1>One</h1>
</div>
<div id="two" class="sec">
<h1>Two</h1>
</div>
<div id="three" class="sec">
<h1>Three</h1>
</div>
<div id="four" class="sec">
<h1>Four</h1>
</div>
I don't know what wrong with my code but it wont display the position i want.
Here's the output:
Output of my code
And here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Escapade Travel & Tours</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Duru+Sans|Actor' rel='stylesheet' type='text/css'>
<link href="css/bootshape.css" rel="stylesheet">
</head>
<body>
<!-- Navigation bar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home.html"><span class="green">Escapade</span> Travel & Tours</a>
</div>
<nav role="navigation" class="collapse navbar-collapse navbar-right">
<ul class="navbar-nav nav">
<li class="active">Home
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">Destination <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Boracay
</li>
<li class="active">Palawan
</li>
<li>Cebu
</li>
<li class="divider"></li>
<li>All Destinations
</li>
</ul>
</li>
<li>Special Offers
</li>
<li>Book Now!
</li>
<li>Contact Us
</li>
</ul>
</nav>
</div>
</div>
<!-- End Navigation bar -->
<!-- Content -->
<div class="container">
<div style="clear: both; height:40px;"></div>
<div style="clear: both; height:15px;"></div>
<div style="clear: both; height:15px;"></div>
<div id="cont_razd">
<div id="right">
<h1>Meet Us</h1>
<div style="height:15px;"></div>
<div class="box_us">
<div class="box_us_r">
<img src="img/fish_us1.gif"> Quezon City, Philippines</div>
<div style="clear: both; height:15px;"></div>
<p>
<img src="img/fish_us2.gif"> Telephone: 02-1234567</p>
<div style="clear: both; height:15px;">
<p> Cellphone: 0912-345-6789</p>
<div style="clear: both; height:15px;"></div>
</div>
</div>
<div class="box_us">
<div class="box_us_l"></div>
<div class="box_us_r">
<div class="box_us_r">
<div style="clear: both; height:15px;"></div>
<img src="img/fish_us3.gif" alt="" /> Email Add: escapadetravelandtours#yahoo.com</div>
</div>
</div>
<div class="box_us">
</div>
<div style="height:25px;"></div>
<b> <i> Book us now and get very good rates! :) </b>
</i>
<br/>
</div>
<div id="left">
<h1>Contact Us</h1>
<div style="clear: both; height:15px;"></div>
<?php echo "<form action=" " method="post ">
<b> Name: </b> <br>
<input type=text size=40 name="ContactName ">
<br> <br> <b> E-mail Address: </b> <br>
<input type=text size=40 name="ContactEmail ">
<br> <br> <b> Subject: </b> <br>
<input type=text size=40 name="ContactSubject ">
<br> <br> <b> Message: </b> <br>
<textarea cols=40 rows=5 input type=text size=150 name="ContactMessage "> </textarea>
<br> <br>
<input type="Submit " name="Send " value="Send ">
<input type="Reset " name="Reset " value="Reset ">" ?>
<div style="clear: both"></div>
</div>
</div>
</div>
<!-- End Content -->
<!-- Footer -->
<div class="footer text-center">
<p>© 2016. All Rights Reserved. Created by</p>
</div>
<!-- End Footer -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootshape.js"></script>
</body>
</html>
I want the meet us to be place in the right while the contact us is in the left but it wont place to where i indicate them.
I have put <div id="right"> in meets us and <div id="left"> in contact us.
I'm using notepad ++ here.
This is my expected output
Please help. Thanks!
Just add this css will make as per your expected result:
#left {
float: left;
}
#right {
float: right;
}
Working Fiddle
You can try below code:
<div class="clearfix">
<div class="col-lg-6 col-md-6 col-sm-6">
left
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
right
</div>
</div>
use bootstrap girds see example of bootstrap girds see here also
you could use
<div class="row">
<div class="col-lg-9">
Your Left content
</div>
<div class="col-lg-3">
Your right content
</div>
</div>
the easiest way, while you use Bootstrap..
You have included bootstrap anyway in your code.. So you can use the bootstrap class.
<div class="row>
<div class="col-lg-6 col-xs-12">
<!-- Put your contact Us div here -->
</div>
<div class="col-lg-6 col-xs-12">
<!-- Put your meet Us div here -->
</div>
</div>
div id = "right"
does not place your div to the right, it just gives it an id.
Enclose both the divs in a
div class = "row"
and then the child divs using column span.
Learn about the bootstrap grid system here:-
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Put the "Contact Us" div before the "Meet Us" div. Then Apply float:left; to both the element. Try to avoid float:right; as much as possible.
Otherwise you can use use display:inline-block to both the divs. Will work just like float and on top of that you can even align them vertically.
I have the following codes written:
<html>
<head>
<?php
if (isset($_POST['report']))
{
$name = $_POST['Name'] ;
$email = $_POST['Email'] ;
header('Location: subscriber.php?key='.$name.'?key1='.$email);
}
?>
<script type="text/javascript" src="assets/bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="inner.css" type="text/css" />
<style>
div#copyright {
float: left;
width: 100%;
background: #000;
color: #fff;
padding: 15px 15px;
}
.c_right {
float: left;
width: 50%;
text-align: left;
}
#copyright li {
float: left;
width: 30px;
margin-right: 10px;
list-style:none !important;
}
.c_left {
float: right;
}
</style>
</head>
<body>
<div id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3">
<h3>Quick Links</h3>
<div id="footnav1">
<ul>
<li>About Us</li>
<li>FAQs</li>
<li>Sitemap</li>
<li>Contact Us</li>
<li>Term & Conditions</li>
</ul>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<h3>Quick Links</h3>
<div id="footnav2">
<ul>
<li>Privacy & Cookie Policy</li>
<li>Megahung Blog</li>
<li>Donate Cashback</li>
<li>How Megahung Works</li>
<li>Why Choose Megahunt?</li>
</ul>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<h3>Quick Links</h3>
<div id="footnav3">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Catalog</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<h3>Newsletter</h3>
<div id="footnav4" class="nl_subscribe">
<form method="post">
<input type="text" name="Name" size="20" class="email_css" placeholder="Enter your name...">
<input type="text" name="Email" size="20" class="email_css" placeholder="Enter your email...">
<input type="submit" name="report" value="Subscribe" class="btn btn-subscribe"/>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="copyright">
<div class="c_right"><h3 class="cp">Copyright © 2015 <span style="color:#ff6803">Megahunt</span>. All Rights Reserved.</h3></div>
<div class="c_left">
<ul class="social">
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
<li><img src="images/linkedin.png"></li>
<li><img src="images/google.png"></li>
<li><img src="images/instagram.png"></li>
<li><img src="images/pinterest.png"></li>
<ul>
</div>
</div>
</body>
</html>
Now when I click on the Submit button the page is loaded but its actually loaded in the same page not going to subscriber.php page.
I have placed the php block before the html also but still the same issue persists.
Can anyone help me with this issue please.
I reopened the question since the OP does not seem to understand what the duplicate question link's instructions are.
How to fix "Headers already sent" error in PHP
As I said in comments, you are outputting before header, and you're not seeing this warning because your system most likely does not have error reporting enabled. Consult my footnotes about this.
Modify your code to this (rest of code omitted) and exit added.
Sidenote: Make sure there are no spaces before your opening <?php tag and that your file does not contain a byte order mark. Absolutely NOTHING should be above your opening PHP, no includes etc.
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
if (isset($_POST['report']))
{
$name = $_POST['Name'] ;
$email = $_POST['Email'] ;
header('Location: subscriber.php?key='.$name.'?key1='.$email);
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="assets/bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="inner.css" type="text/css" />
...followed by the rest of your code.
Also make sure that your subscriber.php does not also have anything that will cause an output before header.
Footnotes:
Add error reporting to the top of your file(s) which will help find errors.
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
// rest of your code
Sidenote: Error reporting should only be done in staging, and never production.
You should also use a conditional !empty() for your inputs.
I have a jquery mobile app that I'm using and I'm trying to get the right panel to open. Its for notifications. I have a feeling it has to do with with the ajax and it being done for multiple pages. I have many pages in the document and I have assigned unique id's for each "myContent" div and also for the function toggleDiv. For some reason when I click on the icon to open the panel it does nothing, and if i click it again it will open the panel then immediately close the panel.
Here is my code, any clues as to how this is happening?
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
}
</script>
<!-- BEGIN PAGE 1 -->
<div data-role="page" id="feed" data-add-back-btn="true">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<!--LEFT SIDE PANEL CONTENT HERE-->
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<center><img src="images/logo_app_white.png" height="25px"></center>
<!--THIS IS THE BUTTON TO PUSH TO MAKE NOTIFICATIONS APPEAR-->
<? echo $number; ?>
</div>
<div data-role="content">
<!--THIS IS WHERE CONTENT FOR THE PAGE GOES-->
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<!--ICONS FOR NAVIGATION BAR-->
</div><!-- /navbar -->
</div>
<!--HERE IS WHERE THE NOTIFICATIONS APPEAR-->
<div data-role="panel" id="myContent" data-position="right" data-display="overlay">
</div>
</div>
<!-- END PAGE 1 -->
Get your document ready out of the function. And the toggle() to show().
Change this
function toggleDiv(divId) {
$("#"+divId).toggle();
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
}
To this
function toggleDiv(divId) {
$("#"+divId).show();
}
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
DEMO