|
PHP - Jquery Menu
Hi,
Have a look this menu
http://jsfiddle.net/GBkMB/6/
I want the same mune but with click function (its using hover function now)
Please help me with this
Similar TutorialsThe code is for generated a home page with two div's: 'left_menu' and 'right_menu', where I want to navigate with the links from left_menu should display the content on the right_menu. I have two links (reports and roles) on the left_menu and two tabs (tab1 and tab2) on the right_menu. 1. When I click on reports, it should open the tab1 and clicking on users should open the tab2. 2. When I launch home.php, the first item(reports) should be opened by default and the tab1 accordingly. Here is the my code I tried, when I click the roles on left_menu, it is opening the default one i.e. tab1 and the left_menu isn't opened by default. home.php <html lang="<?php echo _SITE_LANGUAGE ?>"> <head> <script src="../js/jqueryv1.10.2.js"></script> <script type="text/javascript"> //accordion left menu $ (document).ready(function() { $ (".wings").click(function(event) { $(".box").slideUp("slow"); if ($(this).next().is(":hidden") == true) { $(this).next().slideDown("slow"); } }); //(".box").hide("slow"); }); //Tab (rightbox) $(document).ready(function() { $('#tabs li a:not(:first)').addClass('inactive'); $('.contain').hide(); $('.contain:first').show(); $('#tabs li a').click(function() { var t = $(this).attr('id'); if($(this).hasClass('inactive')) { //this is the start of our condition $('#tabs li a').addClass('inactive'); $(this).removeClass('inactive'); $('.contain').hide(); $('#'+ t + 'C').fadeIn('slow'); } }); }); </script> <style> .wings { width:200px; float:left; padding:7px 11px; } .box { width:195px; float:left; display:none; margin:0px 20px; } </style> </head> <body> <?php echo '<div class="left_menu"> <div class="wings"> <div style="float:left;"><img src="images/right_arrow.gif"/></div> <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Reports</a></div> <div style="float:right;"><img src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div> </div> <div class="box">'; $reports = $reports->get_report(); $reports_count = count($reports); if ($reports_count > 0 ) { foreach ($reports as $ds) { echo '<div style="float:left;margin:5px 14px;width:180px;"> <div style="float:left;"><img src="images/right_arrow.png"></div> <div style="float:left;padding:0px 6px;">'.$ds['dsource_name'].'</img></div> <div style="float:left;"><a href="edit_dsource.php?id='.$ds['id'].'"><img src="images/edit.gif"/></a></div> <div style="float:left;padding:1px 2px;"><img src="images/not-available.png"/></div> </div>'; } } else echo 'No Datasources'; echo '</div> <div class="wings"> <div style="float:left;"><img src="images/right_arrow.gif"/></div> <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Roles</a></div> <div style="float:right;"><img src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div> </div> <div class="box">'; $roles = $roles->get_report(); $roles_count = count($roles); if ($roles_count > 0 ) { foreach ($roles as $ds) { echo '<div style="float:left;margin:5px 14px;width:180px;"> <div style="float:left;"><img src="images/right_arrow.png"></div> <div style="float:left;padding:0px 6px;">'.$ds['dsource_name'].'</img></div> <div style="float:left;"><a href="edit_dsource.php?id='.$ds['id'].'"><img src="images/edit.gif"/></a></div> <div style="float:left;padding:1px 2px;"><img src="images/not-available.png"/></div> </div>'; } } else echo 'No Datasources'; echo '</div>'; echo '</div> <!--left_menu-->'; echo '<div class="right_menu"> <ul id="tabs"> <li><a id="tab1">Configuration</a></li> <li><a id="tab2">Report Viewer</a></li> </ul> <div class="container" id="tab1C"> <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br> ( Report Tab content ) </div> </div> <div class="container" id="tab2C"> <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br> ( Report Tab content ) </div> </div>'; echo '</div><!--right_menu-->'; ?> </body> </html> JS Fiddle : http://jsfiddle.net/gansai/s9NvX/1/ Can anyone help me with this?
http://stackoverflow...u-with-sublinks
Thanks in advance!!!!
Edited by antoon100, 03 September 2014 - 09:46 AM. So i have a <drop down> menu, and a <nav> menu on my left side of the page. I have a problem when i click at the first column of my drop down menu and it explores submenu, the submenu mixes with the nav menu that is under the drop down menu on the left. i could solve it with margin-top of the nav menu but i don't like the empty space beetwen them. I tried with putting overflow:visible; in CSS of my dropdown menu but it is still the same. drop down menu is seen but there is stil seen nav menu under and they are mixed. So basicly i want my dropdown menu to be priority, so when i clicks on my first column (only first column is problem because there under is nav menu the other are open nice) it will explore submenu and the part of nav menu that covers the submenu will be hidden.
Here is the screen shot:
Here is the code of head <dropdown> menu if someone finds the problem.
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 900px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
Here is the code of <nav> menu if someone finds the problem.
#cssmenu {
width:15%;
padding: 0;
margin-top: 50px;
margin-left:auto;
margin right:auto;
float:left;
border: 0;
line-height: 1;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
font-size: 12px;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 4px solid #1b9bff;
color: #ffffff;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: #1b9bff;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #ffffff;
}
#cssmenu ul ul a:hover {
color: #ffffff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
Edited by Dorkmind, 26 November 2014 - 05:00 PM. Hi All,
Am sure this is simple but can't work it out. I have the following which creates 3 menus:
<p>Drag items from one menu to another</p> <table> <tr> <td valign="top">Menu 1</td> <td valign="top">Menu 2</td> <td valign="top">Menu 3</td> </tr> <tr> <td valign="top"> <ul class="sortable" id="menu1"> <li id="id_1">Item 1</li> <li id="id_2">Item 2</li> </ul> </td> <td valign="top"> <ul class="sortable" id="menu2"> <li id="id_3">Item 3</li> <li id="id_4">Item 4</li> </ul> </td> <td valign="top"> <ul class="sortable" id="menu3"> <li id="id_5">Item 5</li> <li id="id_6">Item 6</li> </ul> </td> </tr> </table>This uses the following to show an array of each menu:
$(function() {
$("ul.sortable").sortable({
connectWith: '.sortable',
update: function(event, ui) {
$('#menu_choice').empty().html( $('.sortable').serial() );
}
});
});
(function($) {
$.fn.serial = function() {
var array = [];
var $elem = $(this);
$elem.each(function(i) {
var menu = this.id;
$('li', this).each(function(e) {
array.push( menu + '['+e+']=' + this.id );
});
});
return array.join('&');
}
})(jQuery);
What I'd like is to simply grab the values of menu 1 only, as the array shows all menus. What am I doing wrong as can't seem to just return menu1.
Going forward, I then want to store the returned array into a PHP cookie if this is possible?
Many thanks
I keep saying I'm going to have to learn javascript and then the library jQuery but find myself learning Swift now instead.
Short one today. I want these two functions to occur back to back. Second function only begins after the first function is complete.
$(function() {
$('.tlt').textillate();
})
$(function() {
$('.tlt1').textillate();
})
If you can please help me with this not only in just code to make that happen but also an explanation of what you did I sure would appreciate it. I've read all morning on promises etc. but have yet to be successful in implementing this.
As you can tell I'm using the plug-in textillate to fade text out one letter at a time. Works great! But I have multiple paragraphs I'm wanting to apply this too so I can't make the div class .tlt since I then lose all paragraphs since it's strips it into spans. That would be ideal of course but I think I forced into making different classes for each paragraph. This will become problematic in the future though since the content is generated dynamically and I will have no idea how many paragraphs that dynamic content will contain. So if there was a way to keep my <p> and </p> that would be even better.
Thanks!
Alright guys, I have a bit of a problem here. I am deleting records using isset($_POST) on the current page but when it submits the records i deleted are still visible. I was thinking of echoing some jquery/ajax to re-load the div that displays the records. Has anyone ever done this before? I dont want the entire page to re-load just that specific area. Hi I am in the process of teaching myself web development, coming from a vb and mssql background. I am building a small page that will display my film library, I just want something quick and simple that gets things working. I have three img tags on my page that display the film posters. The current film and the one previous and next. What I would like is a left and a right arrow that just scroll through the library. I am thinking I need to read the sub folder of D:\movies and story the full path name into an array, and then when the user presses a arrow it moves forward or back. Everything is local and I am unsure about how to handle the event of the left/arrow being pressed. Does PHP handle that kind of event or would Jquery be more suitable or something else completely?? thanks for any pointers. Im wondering if i should use jQuery or Php. and how about i would go about doing this. Code: [Select] <?php print "<table border=\"0\" cellpadding=\"0\" width=\"100%\" height=\"100\"cellspacing=\"0\" style=\"border-collapse:collapse\"bordercolor=\"grey\" bgcolor=\"white\" valign=\"top\"> <td align=\"left\" width=\"100%\" onclick=\"I3.location.href='getuserdetail.php?prop=$ownerid'\"><b>Property Name</b></td><td><b>Tenant</b></td><td><b>Property Status</b></td><td>Rent Amount</td>"; $connect = mysql_connect("localhost","root",""); mysql_select_db("magic"); $query = "SELECT * FROM props WHERE ownerid = '$ownerid' ORDER BY name ASC "; $result = mysql_query($query); while($row = mysql_fetch_assoc($result)) { $propertyid = $row['propid']; $propertyname = $row['name']; $propertydesc = $row['description']; $propertycity = $row['city']; $propertystate = $row['state']; $propertyzip = $row['zip']; $active = $row['active']; $lease = $row['lease']; $leaseamt = $row['leaseamt']; if($active == "1"){ $propertystatus = "Active"; } else { $propertystatys = "Unknown"; } print"<tr onMouseOver=\"this.bgColor = '#CEE3F6'\" onMouseOut =\"this.bgColor = '#FFFFFF'\"> <td align=\"left\" width=\"25%\" onclick=\"window.open('viewpropdetail.php?prop=$propertyid','mywindow','width=1200,height=600,scrollbars=1')\">$propertyname</td><td>$ownerfirstname $ownerlastname</td><td>$propertystatus</td><td>$$leaseamt</td> "; } print"</td></table>"; ?> Basically i have a link under that is add property. it pops up a box. with a form you fill it out, and it inserts the record into database. What I'm trying to do. is get it to "Refresh" the property list ( ex. code above). so it shows the new property in the table. i have never used jQuery. but was wondering if i could do that with php. Is there a way to say if records are changed.. update? Hey, I have a foreach loop displaying some data from my table, what i need to do is run a Jquery each function on the repeated element so it fadesIn each element one at a time. I am guessing i need to set somesort of interval for this to work. I have been messing with it for a good hour or so now and i cant seem to get it working. Has anyone done this before or seen it done else were? Hi All (Again) I am looking to pick up variables in jquery from a string created: function search_by() { var search_term = $('#search_for', $(this).attr('value')); alert(search_term); } I cant seem to get the value i am trying to into a "var". This is the code on the page i am using a onClick="search_by();" i.e: <a class="show_cats" search_cat="PDAs & Accessories" search_for="fire" onclick="search_by();" href="#"> I am trying to get the value inside the "search_for" field. Any ideas???? I am trying to create a webpage and I've added some jQuery to it but it is not working, can you help me out?
JS File:
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=add]').val();
$('.message').append("<li>" + toAdd + "</li>")
});
});
HTML:
<html> <head> <title> Test page </title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type='text/javascript' src='script.js'></script> </head> <body> <div class="top-section"> <div class="top-back"> <div class="tcontent"> <div class="tcontent-body"> <h1>Welcome to the Forum Pioneer Test Page</h1> <ul> <li>This will be a list of to do's.</li> <li>Add your own list below</li> </ul> <form> <input type="text" name="add" value="Type Here"> </form> <div id="button">Add</div> <div id="message">d</div> </div> </div> </div> </div> </body> </html>I've put only the elements that are affected. I try clicking the button, but the content isn't appended. Edited by PrinceTaz, 13 December 2014 - 12:55 PM. Hi, I am working on a project to help me learn more about JSON and JQuery and how they interact. I am able to pull in my JSON data fine and it displays in an HTML table. What isn't working is I want the tables rows to be striped, and normally this works, but I didn't know if it isn't working b/c it is AJAX or if I have something wrong with my JQuery. Also, I was hoping to add a reference to an image path in the JSON file as well, but wasn't sure how that is done or if it could be done at the JSON level.
Here is my code that I am working on:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON Presidents</title>
<style type="text/css">
body{
font-family:arial, helvetica, sans-serif;
text-align:center;
width:100%;
margin:200px 0 0 0;
}
#PresidentInfo{
width:75%;
margin:0 auto;
}
table#data{
width:100%;
}
table#data th{
background:#333;
color:#fff;
text-align:center;
text-shadow:1px 1px 1px rgba(0,0,0,1);
padding:5px;
}
table#data td{
border:1px solid #333;
border-collapse:collapse;
padding:10px;
margin:0 5px 0 5px;
text-align:center;
}
.odd {
background: #ccc;
}
</style>
</head>
<body>
<div id="PresidentInfo">
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
(function ($) {
$(document).ready (function(){
$("tr:odd").addClass("odd");
});
});
})(jQuery);
</script>
<script>
$.getJSON('data.json', function(data) {
var output="<table id='data'><tr><th>First Name:</th><th>Last Name:</th><th>Month of Inauguration:</th><th>Year of Inauguration:</th></tr>";
for (var i in data.Presidents) {
output+="<tr><td>" + data.Presidents[i].firstName + "</td><td>" + data.Presidents[i].lastName + "</td><td>" + data.Presidents[i].YearInauguratedPresident.month + "</td><td>" + data.Presidents[i].YearInauguratedPresident.year + "</td></tr>";
}
output+="</tr></table>";
document.getElementById("PresidentInfo").innerHTML=output;
});
</script>
</body>
</html>
{"Presidents":[
{
"firstName":"Barack",
"lastName":"Obama",
"YearInauguratedPresident": {
"month":"January",
"day":20,
"year":2009
}
},
{
"firstName":"George W",
"lastName":"Bush",
"YearInauguratedPresident": {
"month":"January",
"day":20,
"year":2001
}
},
{
"firstName":"Bill",
"lastName":"Clinton",
"YearInauguratedPresident": {
"month":"January",
"day":20,
"year":1993
}
},
{
"firstName":"George",
"lastName":"H.W Bush",
"YearInauguratedPresident": {
"month":"January",
"day":20,
"year":1989
}
}
]}
Hello all,
So I found this html and jquery example online. Works great if I just copy the below code in a file call test.html and run it from the browser, however if I create a PHP project in netbeans and create a file called index.php and put the same code and the jquery.min.js in the same directory, for some reason it doesn't work. The java script portion give strange behavor. I am new to all these, can someone please help?
<!DOCTYPE html> <!--Code by Chris Youderian, ContactMetrics.com, http://contactmetric...act-form-jquery, Code released under an MIT license, http://opensource.org/licenses/MIT --> <html lang="en"> <head> <script type='text/javascript' src='jquery.min.js'></script> </head> <!-- Styles --> <style> #contact label{ display: inline-block; width: 100px; text-align: right; } #contact_submit{ padding-left: 100px; } #contact div{ margin-top: 1em; } textarea{ vertical-align: top; height: 5em; } .error{ display: none; margin-left: 10px; } .error_show{ color: red; margin-left: 10px; } input.invalid, textarea.invalid{ border: 2px solid red; } input.valid, textarea.valid{ border: 2px solid green; } </style> <!-- JavaScript Code --> <script> $(document).ready(function() { <!-- Real-time Validation --> <!--Name can't be blank--> $('#contact_name').on('input', function() { var input=$(this); var is_name=input.val(); if(is_name){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); <!--Email must be an email --> $('#contact_email').on('input', function() { var input=$(this); var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; var is_email=re.test(input.val()); if(is_email){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); <!--Website must be a website --> $('#contact_website').on('input', function() { var input=$(this); if (input.val().substring(0,4)=='www.'){input.val('http://www.' input.v...substring(4));} var re = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/; var is_url=re.test(input.val()); if(is_url){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); <!--Message can't be blank --> $('#contact_message').keyup(function(event) { var input=$(this); var message=$(this).val(); console.log(message); if(message){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); <!-- After Form Submitted Validation--> $("#contact_submit button").click(function(event){ var form_data=$("#contact").serializeArray(); var error_free=true; for (var input in form_data){ var element=$("#contact_"+form_data[input]['name']); var valid=element.hasClass("valid"); var error_element=$("span", element.parent()); if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;} else{error_element.removeClass("error_show").addClass("error");} } if (!error_free){ event.preventDefault(); } else{ alert('No errors: Form will be submitted'); } }); }); </script> <body> <form id="contact" method="post" action=""> <!-- Name --> <div> <label for="contact_name">Name:</label> <input type="text" id="contact_name" name="name"></input> <span class="error">This field is required</span> </div> <!-- Email --> <div> <label for="contact_email">Email:</label> <input type="email" id="contact_email" name="email"></input> <span class="error">A valid email address is required</span> </div> <!--Website --> <div> <label for="contact_website">Website:</label> <input type="url" id="contact_website" name="website"></input> <span class="error">A valid url is required</span> </div> <!-- Message --> <div> <label for="contact_message">Message:</label> <textarea id="contact_message" name="message"></textarea> <span class="error">This field is required</span> </div> <!-- Submit Button --> <div id="contact_submit"> <button type="submit">Submit</button> </div> </form> </body> </html> i have two scripts i am using in one file. one is for an image slider and the other is a drop-down menu. both jquery driven. one seems to break the other. if i remove the first line of code from one script (
jQuery.noConflict()), it seems to fix the problem and both scripts work. can someone explain to me what is going on? :/ fyi, i tried renaming variables for one script, hoping their was a naming conflict but that didnt work for me either.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1" /> <!-- Apple mobiles -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content = "<?php echo $keywords; ?>" />
<meta name="description" content="<?php echo $description; ?>" />
<title><?php echo $page_title; ?></title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="bmw_styles.css" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/flexdropdown.css" />
<!-- homepage slider -->
<link rel="stylesheet" type="text/css" href="slider/css/default.css" />
<link rel="stylesheet" type="text/css" href="slider/css/component.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>-->
<script type="text/javascript" src="scripts/global.js"></script>
<!-- navigation -->
<script type="text/javascript" src="scripts/flexdropdown.js"></script>
<!-- homepage slider -->
<script src="slider/js/modernizr.custom.js"></script>
<script src="slider/js/jquery.cbpFWSlider.js"></script>
<!-- initialize jquery when the DOM is ready -->
<script type="text/javascript">
$( function() {
$( '#cbp-fwslider' ).cbpFWSlider();
$( '#cbp-fwslider' ).cbpFWSlider('interval');
} );
</script>
</head>
I am using this to open contents into a modal window, but in the process I am passing it through loop.php to check if the page exists and then load. Is there a way to completely skip the loop.php file and load my clicked link?
$(document).ready(function(){
///////LINK in a Modal Window////////
$('#all').delegate('a.pop-lnk', 'click', function(){
var page = $(this).attr('id');
$('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
$('#popup').css({'display': 'block'});
$('#popup').load("../help-file/loop.php?page="+ page);
});
});
The id attr I am getting from this code is my page's name but I need to add the .php extension if is possible so I can load the page.
Edited by Pavlos1316, 18 November 2014 - 03:04 PM. Hello everyone, im make a website for my final school project. My header is a image slider made in jQuery with a time interval to change to images. At the moment when you press a link, the URL changes (example: index.php?page=contact). Then I use the $_GET to know what html file needs to be included, for this example: contact.html. The problem is when the URL changes (after clicking a link), the page refreshes and my jQuery header also refreshes to image[0]. Is there a way to include the right content when clicking on a link, without refreshing the page/header? Thanks in advance Gucco. This topic has been moved to Ajax Help. http://www.phpfreaks.com/forums/index.php?topic=316223.0 Hi! Having a lot of fun dusting off the coding and putting together a site with PHP, CSS, and jQuery. I've run into one problem that I can't get past though. I implemented jQuery History to use hashtags to maintain browser back/forward buttons and linkability of the site (and not reload header and footer when updating content). The main purpose of the site is to showcase photography that's hosted on Flickr. I've got this working well using Slickr. I have the Slickr code to load my galleries sets in a file called 'pictures.php' which is loaded fine into #page_content using a link to #pictures. The problem arises when I click on a gallery/set: I get taken back to the default view of the site without any hashtage because Slickr requires a link using parameters, so: www.myexamplesite.com/#pictures becomes www.myexamplesite.com/index.php?id=72157626067797650&p=1 As you can see, since it loses the hashtag, I am no longer looking at the right page. Does anybody have any ideas on how I can specify both the hashtag and the parameter? Cheers! |
|||||||