I'm trying to make nested columns using bootstrap3, Logically everything is set well, but I can see that the rules for a specific size overwrite another size, for instance I'm applying some rules when the screen size is medium but it affects the large size, also the text appears on top of the images, I don't know where is the problem.
another question is there a way for the image to be resized ( scaled ) automatically?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 1</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
<script src="js/jquery-3.4.0.min.js"></script>
<style type="text/css">
body{ text-align: center; }
img{ height:150px; width: 150px; margin: 0 auto; display: block; }
#media (min-width: 768px) and (max-width: 991px){
div{text-align: left;}
h1{margin-top: 0;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<section class="col-lg-2 col-md-4 col-sm-12 col-xs-6 col-xs- offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/4.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
<div class="clearfix visible-sm-block"></div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/1.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
</p>
</div>
</div>
</section>
<div class="clearfix visible-sm-block"></div><!-- as the elements have been broken at some break points-->
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/2.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/3.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/1.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
<section class="col-lg-2 col-md-4 col-sm-6 col-xs-6 col-xs-offset-3 col-lg-offset-0 ">
<div class="row">
<div class="col-sm-1 col-sm-offset-3">
<img src="images/2.svg" class="img-circle" alt="1">
</div>
<div class="col-sm-5">
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
the result should be the following:
- 6 columns at the large screen
- full-width columns at a small screen
- 3 columns at a medium screen
Way for the image to be resized automatically use:
background-size: cover;
For styling rule use !important like
display: block !important;
Related
If you press on menu item than go to another one it's not possible to go back to the one you came from, because all stay on active.
How can I fix this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu1">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu2">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu3">JavaScript</a></li>
</ul>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
Both are possible using bootstrap's built in events. Put the following in your html just before the close body tag. This effectively removes all active classes from li's when the menu is shown.
<script>
$(document).ready(function(){
$(".dropdown").on("show.bs.dropdown", function(){
$(".dropdown-menu li").removeClass("active");
});
});
</script>
Here is a fiddle
Bootstrap documentation
I will copy the example of bootstrap
offcanvas ,but The page is smaller then example of bootstrap on my server.The same css,same html who can tell me ,why
the example of bootstrap:
my page:
My page is smaller then bootstrap example.
the code of this page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Off Canvas Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/static/autoapp/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/static/autoapp/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/autoapp/css/offcanvas.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/static/autoapp/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div><!--/.sidebar-offcanvas-->
</div><!--/row-->
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div><!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/static/autoapp/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/autoapp/js/ie10-viewport-bug-workaround.js"></script>
<script src="/static/autoapp/js/offcanvas.js"></script>
</body>
</html>
You dont have all source files of example page.
Check this and compare with your code
I fix the problem,the chrome can remember zoom,i set up long time ago
I am trying to adapt the following Fiddle:
Bootstrap modal
Here is my code:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js" type="text/javascript"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<style>
.modal-body {
max-height: calc(100vh - 150px);
overflow-y: auto;
}
</style>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
When I run it I see the blue button, but when I click on it nothing happens. What am I doing wrong?
Thanks
You didn't load jQuery above the bootstrap js. Now use this.
<script src="https://code.jquery.com/jquery-2.2.2.min.js" type="text/javascript"></script>
Now it will be working.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.2.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js" type="text/javascript"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<style>
.modal-body {
max-height: calc(100vh - 150px);
overflow-y: auto;
}
</style>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
I've got several questions regarding bootstrap.
Is there a way to make a bootstrap site fixed on a certain view (320px) when resizing it on a pc? how would you go about it? im currently using chrome to test it.
another thing, i have this logo on the navbar, is there a way to insert an image in it and automatically resize it using a css styling rather than making the image smaller on a image editor, also put it infront of the navbar not inside it.
when i resize the website smaller than 200px width, banner image goes smaller and shows the background behind the jumbotron. how can i make the image snuggly fit the top navbar?
Practice Website 1 Bootstrap
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT US</li>
<li>LINKS</li>
<li class="dropdown"> <!-- Dropdown Link Start-->
MEDIA<b class="caret"></b>
<ul class="dropdown-menu">
<li>FACEBOOK</li>
<li>TWITTER</li>
</ul> <!-- Dropdown Link End-->
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div> <!-- Navigational Start Container-->
<div class="jumbotron">
<h1>Success!!!</h1>
Removed Jumbotron Padding and Margin/ still not a success
<div class="container"> <!-- Grid System Content -->
<div class="row">
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 1</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit<a class="btn btn-danger">ReadMore</a></p>
</div>
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 2</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit <a class="btn btn-danger">ReadMore</a></p>
</div>
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 3</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit. <a class="btn btn-danger">Read More</a></p>
</div>
</div>
</div>
<!-- Footer Start-->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left ">KREATIV TECH COPYRIGHT 2014</p>
Subscribe on Youtube
</div> <!-- Footer Start-->
<!-- jquery and javascript start script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script> <!-- JS End Script-->
1) You can set you're rows classes to col-xs-#number where #number is between 1 and 12 depending on how wide the row is. This will mean that you're site is "meant" for mobile/smaller screens, and any desktop/larger screens use of it will have the same styling.
2) You could do:
<img src="/urlpath.jpg" id="images_id" />
and
#images_id {
height: desired_height;
width: desired_width;
}
3) you can give the image a class of 'img-responsive'. Or you can set the image size relative to the navbar width and height and it will shrink as the navbar does.
been days im struggling with this. the problem is as follows...
I'm a newbie in the world of yii
So i have got a page 'resultat' and on selecting different menus, the content needs to be change through ajax.
Here the view:
<!--Content_Resultat-->
<div class="content_resultat">
<div class="header">
<div class="header_top">
<div class="centerheader">
retournez à l'étape en cours
</div>
</div>
<div class="header_bottom">
<ul class="centerlist">
<li><span>1</span> votre piece</li>
<li><span>2</span> votre exigence</li>
<li><span>3</span> vos autre apareils</li>
<li><span>4</span> votre utilisation</li>
</ul>
</div>
</div>
<div class="barre_titre">
<a href="#">
pour vous, lg vous propose
</a>
<div class="print">
imprimer la liste
</div>
</div>
<div id="container">
<?php echo CHtml::beginForm();?>
<div class="onglet">
<ul class="menu">
<?php $i = 1;
foreach ($data as $categorie) {?>
<li class="active">
<div class="onglet<?php echo $i;?>">
<img alt="no-picture" src="<?php echo $categorie->image;?>" />
<h4><?php echo CHtml::ajaxLink(
$categorie->titre,
Yii::app()->createUrl('getproduit'),
array('type'=>'POST',
'dataType' =>'json',
'enableAjaxValidation'=>true,
'update'=>'#carousel_container .contentWrapper #carousel_inner',
'data'=>'js:jQuery(".menu li h4 a").serialize()',
'success'=>'function(data){ $("#carousel_container li").text(data);}',
'error'=>'function(a,b,c){alert(b)}'
));?></h4>
</div>
</li>
<?php $i++; }?>
</ul>
</div>
</div>
<div class="carousel_tv" id="carousel_container">
<div class="contentWrapper">
<div id="carousel_inner">
<ul id="carousel_ul">
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image1.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image2.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image3.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image1.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image2.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image3.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image1.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image2.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
<li>
<div class="carousel_pic">
<img alt="no-picture" src="images/image3.png" />
<div>
<h3>gamme le5510</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius nulla eu neque porttitor in mattis lectus pulvinar. </p>
</div>
</div>
</li>
</ul>
</div>
<div>
<h1>No Content</h1>
</div>
<div>
<h1>No Content</h1>
</div>
</div>
</div>
</div>
<?php echo CHtml::endForm();?>
the data is being displayed through an xml.
the controller:
public function actionGetproduit(){
$obj_produit = new Gamme();
$produits = $obj_produit->get_produits('tv');
foreach ($produits as $data){
echo CHtml::tag('produit',array('style'=>'display:block'),CHtml::encode($data),true);
}
}
I need the data being send from the controller to be displayed on the view..
But unable to do it, any help plss
Thanks :-(
For ajax returns, you generally would can use renderPartial or echo the results as you have it, but the CHtml::tag functions you would usually pass an HTML object for the tag name, see here or here but it looks like your function is expecting JSON, so you would need to output your results as JSON, see the Yii JSON methods. If that's not the issue, you might need to explain a bit more.
Normally with Yii on ajax button or link or what ever the case might be, you do a on success
array('success'=>'js:function(data) {
jQuery("div#status").html(data);
}
and inside your controller, you can echo the response back to your view. Also make sure you have jQuery loaded in the view!