8 Replies - 1953 Views - Last Post: 11 September 2013 - 11:59 PM

#1 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

jquery/ajax to refresh content

Posted 03 September 2013 - 11:46 PM

Hi,
I want to create a web site like http://usatoday.com. When i click on the menu item, only the content part has to be changed like scrolling. I tried using ajax. Can anybody let me know the sample coding for when i click the menu item the content part to be changed.

Thanks
Rekha
Is This A Good Question/Topic? 0
  • +

Replies To: jquery/ajax to refresh content

#2 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

Re: jquery/ajax to refresh content

Posted 03 September 2013 - 11:59 PM

i am using html5 and css3 for development. Please guide me.

Thanks
Rekha
Was This Post Helpful? 0
  • +
  • -

#3 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

Re: jquery/ajax to refresh content

Posted 04 September 2013 - 01:15 AM

I have created a menu for my page. But when clicking the menu if i give a link it is going to the nextpage but the whole page is getting refreshed. I want only the content need to be refreshed.
Was This Post Helpful? 0
  • +
  • -

#4 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: jquery/ajax to refresh content

Posted 04 September 2013 - 01:22 AM

are you firing your click event through jquery?
if yes , you can use
return false;
in your click event.
Was This Post Helpful? 0
  • +
  • -

#5 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

Re: jquery/ajax to refresh content

Posted 04 September 2013 - 01:31 AM

ok thanks for your reply.
I will try with this code.
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 451
  • View blog
  • Posts: 1,947
  • Joined: 30-April 10

Re: jquery/ajax to refresh content

Posted 04 September 2013 - 12:00 PM

If you are still having trouble please post relevant code, in code tags, for us to more easily help you. Thanks.
Was This Post Helpful? 0
  • +
  • -

#7 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

Re: jquery/ajax to refresh content

Posted 10 September 2013 - 12:36 AM

Hi,
This is the code i have written for Html. But when i run it, all the three containers are getting displayed in the same page. Scrolling to the nest page is not working. Please help me.
!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	
	<title>Prime Source Technologies</title>
	
	<meta name="description" content="primesource for chassis,powersupplies"/>
	<meta name="keywords" content="computer chassis, computer powersupplies,computer accessories,computer networkcards,computer storagesolutions,primesource" />
	<meta name="author" content="Thiago S.F. - http://thiagosf.net" />
	
	<link href="menu.css" rel="stylesheet" type="text/css">
	<link href="maincss.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
	<script language= type="text/javascript">
	jQuery(document).ready(function($) {
    $('#banner-fade').bjqs({
        'height' : 320,
        'width' : 620,
        'responsive' : true
    });
});
</script>
<style type="text/css">
#cont1
{
position:relative;
background:#666666;
width:auto;
height:auto;
}
#cont2
{
position:relative;
background:#666666;
width:auto;
height:auto;
}
#cont3
{
position:relative;
background:#666666;
width:auto;
height:auto;
}

#slider div
{
    position:relative;
    width:500px;
    height:50px;
    border:1px solid transparent;
    display:inline-block;
}
</style>
<script language="javascript" type="text/javascript">
var sliderPos = ["0px","-500px","-1000px"];

$("ul").on("click","li",function(){
    var index = $(this).index();
    //alert(index);
    $("#slider").animate({
        marginLeft:sliderPos[index]
    },500);
});
</script><script language="javascript" type="text/javascript">
$(document).ready(function()
		
		{
		
		//Attach a handler to the click event
		
		//of the link on the page:
		
		$('a').click(function()
		
		{
		
		//Target the div with id of result
		
		//and load the content from the specified url
		
		//and the specified div element into it:
		
		$('#content').load('content.htm #content');
		
		
		});
		$('a1').click(function()
		
		{
		
		//Target the div with id of result
		
		//and load the content from the specified url
		
		//and the specified div element into it:
		
		$('#content').load('content.htm #content');
		
		});		
		});
		
		
</script>		
<style type="text/css">
#body {
   /* margin:0px auto;*/
    width:100%;
	background-color:#000000;
	text-align:center;
	
 /*   height:466px;*/ 
    
   
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}
+
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

</style>

<!--js slider -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery.mobile.pagination.js

<!-- Include the plugin *after* the jQuery library -->
<script src="bjqs.min.js"></script>

<!-- Include the basic styles -->
<link type="text/css" rel="Stylesheet" href="bjqs.css" />
<!--end of js slider-->

</head>



<body>


	<div id="container">
	<div id="leftarrow">
		<a href="#"> <img src="leftarrow.jpg"></a>
		
	</div>
	<div id="rightarrow" ></div>
	<div id="menucontainer">
	<div id="navMenu"  style="clear:both" align="center">
 <ul>
     <li id ="style1"><a id="a1" href="#cont1" class="red">Home</a></li>
	
	 <li id="style2"> <a href="#cont2" class="blue"> Services </a></li>
   <li id="style3"> <a href="#cont3"> Products </a>
  <ul>

    <li><a href="#">Wet Suit</a></li>

    <li><a href="#">Vacuum Cleaner</a></li>

    <li><a href="#">Pill Box</a></li>

    <li><a href="#">Knee Socks</a></li>

    <li><a href="#">Pirate Hat</a></li>

    <li><a href="#">Kilt</a></li>
  </ul> <!-- end inner UL -->
  </li> 
     <!-- end main LI -->
	 <li id="style4"><a href="" class="orange">Contact us</a></li>
  </ul> 
  <!-- end main UL -->
   

 
 </div> <!-- end navMenu --></div>
 <div id="content" style="clear:both">
 <div id="slider">
        <div id="cont1">Container 1</div>
        <div id="cont2">Container 2</div>
        <div id="cont3">Container 3</div>
    </div>>
</div></div>
 </div>
 
</div>
</body>
</html>


Thamks in advance
Rekha

This post has been edited by andrewsw: 10 September 2013 - 01:33 AM
Reason for edit:: Fixed code tags

Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 451
  • View blog
  • Posts: 1,947
  • Joined: 30-April 10

Re: jquery/ajax to refresh content

Posted 10 September 2013 - 10:28 AM

You have some issues to attend to.

  • Remove the xmlns <html xmlns="http://www.w3.org/1999/xhtml"> => <html>
  • You have an extra > close to the end of the document line 236</div>>
  • You are adding jquery twice


This is just for starters fix this and then let us know if you are having more issues.
Was This Post Helpful? 0
  • +
  • -

#9 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

Re: jquery/ajax to refresh content

Posted 11 September 2013 - 11:59 PM

Hi,
The animation is working but i want to move the slider to the right, but it is moving down (it is working vertically, i want horizontally) and also it is showing all the three containers in the same page.


Thanks in advance
Rekha
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1