I am working on a one page website that allows the users to add and remove pages from there navigation as and when they would like too, the way it works is that if the click 'Blog' on the main nav a 'Blog' section should appear on the page, if they then click 'News' the 'News' section should also be visible, however the way I have started to implement this it seems I can only have one section at a time, can my code be adpated to allow multiple sections to shown on the main page.
Here is my code for the page that has the main menu and the users selections on it.
<!DOCTYPE html>
<head>
<title>Development Site</title>
<link rel="stylesheet" href="/media/css/reset.css" media="screen"/>
<link rel="stylesheet" href="/media/css/generic.css" media="screen"/>
<script type="text/javascript" src="/media/javascript/jquery-ui/js/jquery.js"></script>
<script type="text/javascript" src="/media/javascript/jquery-ui/development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="/media/javascript/jquery-ui/development-bundle/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.menuitem').click(function() {
var link = $(this), url = link.attr("href");
$("#content_pane").load(url);
return false; // prevent default link-behavior
});
});
</script>
</head>
<body>
<li><a class="menuitem" href="inspiration">Inspiration</a></li>
<li><a class="menuitem" href="blog">Blog</a></li>
<div id="content_pane">
</div>
</body>
</html>
You should try something like this
$('a.menuitem').click(function() {
var link = $(this), url = link.attr("href");
var $newDiv = '<div></div>';
$("#content_pane").append($newDiv);
$newDiv.load(url);
return false; // prevent default link-behavior
});
I havent tested that but it should work. If you can please report your result.
Alternatively you can create a variable that stores loaded content, wrap it into a div element and append created element to the #content_pane
Building on what Mike put.. do this:
$('a.menuitem').click(function(e) {
var link = $(this), url = link.attr("href");
var $newDiv = '<div></div>';
$("#content_pane").append($newDiv);
$newDiv.load(url);
e.preventDefault; // prevent default link-behavior
});
The e.preventDefault(); will stop the default action from occuring. Then it should not follow the link. Return False is usually used in the .submit() function. You'll need .preventDefault for the .click().
Related
How can I use the content in $displayusercontent which is pulled from the db into the Text field on the jquery.
I've tried this below, but nothing returns, if I echo $displayusercontent on to the page then it works this way.
<html>
<head>
</head>
<body>
<!-- my content here-->
<script type="text/javascript">
var userContent = <?php echo $displayusercontent; ?>
</script>
<script type="text/javascript" src="/my/javascript/file/here.js"></script>
</body>
</html>
This is from my jquery file
initIntro: function () {
// display marketing alert only once
if (!$.cookie('intro_show')) {
setTimeout(function () {
var unique_id = $.gritter.add({
// (string | mandatory) the heading of the notification
title: 'MyTitle',
// (string | mandatory) the text inside the notification
text: userContent,
// (string | optional) the image to display on the left
//image: '../../assets/local/layout/img/avatar.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: true,
// (int | optional) the time you want it to be alive for before fading out
time: '',
// (string | optional) the class name you want to apply to that specific message
class_name: 'my-sticky-class'
});
// You can have it return a unique id, this can be used to manually remove it later using
setTimeout(function () {
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
});
}, 15000);
}, 2000);
$.cookie('intro_show', 1);
}
}
It's invalid. You need to make it a string
var userContent = <?php echo json_encode($displayusercontent); ?>;
As #dsclementsen pointed out, in this case using json_encode is the right option.
After the posts and reading the links attached, this is my code that works.
<html>
<head>
</head>
<body>
<!-- my content here-->
<script type="text/javascript">
var userContent = <?php echo json_encode($displayusercontent) ?>;
</script>
<script type="text/javascript" src="/my/javascript/file/here.js"></script>
</body>
</html>
Thanks all for the help :-)
I have a pagination that I did only with php, but now Im trying to do my pagination using ajax and some fade effects.
I have this link in my index.php to pass my BASE, that is my htttp://localhost/project url to jQuery:
<link rel="nofollow" title="base" href="<?php echo BASE; ?>" />
Then I have my jQuery function that works when I click in my pagination link.:
$(function(){
base = $('link[title="base"]').attr('href');
urlaction = base+'/actions';
alert(urlaction);
$('#body-content').on('click','.paginator a',function(){
if($(this).hasClass('active')){
return false;
}else{
$('#body-content .paginator span').css({color:'#FFF','border-color':'#fff'});
$('#body-content .paginator a').removeClass('active');
$(this).addClass('atv');
var url = $(this).attr('href');
var data = url.lastIndexOf('/') + 1;
var data = url.substr(data);
$('#body-content .news').fadeTo(500,'0.2');
$.post(urlaction,{action:'article_pagination',page:data},function(pagination){
alert(pagination);
$('html, body').delay(500).animate({scrollTop:$('h2').offset().top},500);
window.setTimeout(function(){
$('#body-content').html(pagination);
$('#body-content .news').fadeTo(500,'1');
},600);
});
}
return false;
});
});
If I alert my alert(urlaction) I get my localhost/project/actions, so its correct it is my url to my actions.php file.
But when I do my alert(pagination); I get my alert with all code that I have in my index.php inside alert box, so it seems that is not getting the correct path to my actions.php file. But The path is correct...
Do you see what can be wrong here??
My alert appears like:
<!DOCTYPE html...>
<html xlmlns>
....
and all my index.php content
I am guessing you are missing the $ before BASE and are seeing an error page alerted back to you with that info.
I got stuck with passing a configuration to our angular application. My problem is
We have configuration is stored in database, so far it's URL of web service to communicate with
Page is rendered by PHP
How can I pass URL stored in database to ng-app?
So far I have hard-coded services.js
app.constant('config', {ws_url: 'ws://domain/ws'});
app.factory('wampy', function ($rootScope, config) {
var url = config.ws_url;
var ws = new Wampy(url, { autoReconnect: true });
return {
something: function () {
console.log(url); // usage of url
}
}
}
Then it is included into main html code (index.php)
<head>
<script type="text/javascript" src="http://dev.local/js/ng/app.js"></script>
<script type="text/javascript" src="http://dev.local/js/ng/services.js"></script>
</head>
But it can be amended / moved to somewhere else.
Any thoughts?
You could have a snippet of javascript rendered by php into a script tag like so
$config = array('ws_url' => 'ws://domain/ws');
$jsonConfig = json_encode($config);
$snippet = <<<EOS
<script type="text/javascript">
angular.module('appName').constant('config', $jsonConfig);
</script>
EOS;
and then output this $snippet somewhere in your page.
I have this site here http://jamessuske.com/freelance/seasons/index.php and in the navigation on the left, I am using jQuery to remove a class and add it the current pages its on, also if you click on the Menu link it should show a submenu.
<script type="text/javascript">
$( '.navigation li a' ).each(function() {
$(this).removeClass('active');
});
$('.navigation li ul.menu-submenu').hide();
$('.navigation li a').eq(6).addClass("active");
</script>
Above is the code I have in every separate page to update the navigation.
In my header.php file, I have the following:
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ((theWindow.width() / theWindow.height()) < aspectRatio) {
$bg.removeClass()
.addClass('bgheight');
} else {
$bg.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
</script>
Would this mess up my navigation?
The header.php file is included on all pages with php include.
jQuery 2.x has dropped support for old IE versions. Use jQuery 1.10.x instead. Credit to Rob W.
My question is that how to pass query string variables on same page without refreshing the page in php? My code is given below:
<img src="a.jpg">
<?php
$a = $_GET['id'];
$b = $_GET['pid'];
?>
Please help me to resolve this issue
<html>
<head>
<title>Test</title>
<meta name="" content="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#image_id").click(function(){
var dataString = 'a=10&b=20';
$.ajax({
type:'POST',
url:'foo.php',
data:dataString,
success:function(data) {
if(data=="Something") {
// Do Something
} else {
// Do Something
}
}
});
});
});
</script>
</head>
<body>
<img id="image_id" src="images/bg.jpg" />
</body>
</html>
Then in the 'foo.php' page do this
if(isset($_POST['a'])) {
// DO SOMETHING
}
Remember the things that you want to send to the 'data' of
success:function(data)
must be echoed out in the foo.php page
You can't.
PHP requires execution on the server and so you'd have to either use AJAX and update your page accordingly, or just refresh your page.
You can by sending an AJAX request to the server. Ajax is a way to send asynchronous request via Javascript. Notice that jQuery has a good library about it.
Use jquery to resolve this. By using the $.ajax in jquery you can do the stuff you need without page refresh.