Would you help with my nav menu? I need help with my nav menu. I want the search item to be a drop down menu but I can't quite get it coded properly. It works for the most part but the search item I want to be a drop down menu and I can't seem to get it right. It doesn't line up properly on the hover.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://kit.fontawesome.com/6eab1538de.js" crossorigin="anonymous"></script>
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
/* utility classes */
.btn {
background:darkgrey;
color:#fff;
padding:10px 13px;
}
h1,h2,h3 {
padding-bottom:30px;
}
p {
line-height: 1.5rem;
font-size: 1.2rem;
padding-bottom:20px;
}
.bg-light {
background:#e3d8d8;
}
.bg-primary {
background:#867e7e;
color:#000;
}
/* navigation */
.container {
margin:auto;
max-width:1300px;
}
li {
list-style:none;
padding:13px;
font-size:1.3rem;
}
ul {
text-decoration: none;
display:flex;
}
.content {
display:flex;
justify-content:space-between;
align-items:center;
height:70px;
}
#navbar {
height:70px;
background:#333;
}
a {
text-decoration:none;
color:#fff;
}
.content li a:hover {
background:#e6e6e6;
color:#000;
padding-top:24.5px;
padding-bottom:24.5px;
}
.logo {
color:#fff;
}
/* dropdown manu */
.dropbtn {
display:inline-block;
color:white;
padding-top:13px;
padding-bottom:13px;
padding-right:13px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown {
padding:0;
margin:0;
box-sizing:border-box;
position:relative;
}
.dropdown-content {
margin-top:8px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: blue;
padding:13px;
text-decoration: none;
display: block;
text-align: left;
}
/* li a:hover, */
.dropdown:hover {
background:#e6e6e6;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* this ensures that drop list is below drop item has to be block */
.dropdown:hover, .dropdown-content {
display: block;
}
/*showcase */
#showcase {
background:url("https://images.pexels.com/photos/6407570/pexels-photo-6407570.jpeg?auto=compress&cs=tinysrgb&w=400");
background-repeat: no-repeat;
background-position:center;
background-size:cover;
height:400px;
text-align:center;
display:flex;
align-items:center;
}
#showcase {
display:flex:
justify-content:center;
align-items:center;
}
.showcase-content h1 {
/* padding-bottom:30px; */
color:#fff;
font-size:2.5rem;
font-weight:700;
}
.showcase-content p {
/* line-height: 1.5rem;
font-size: 1.2rem; */
color:#fff;
font-weight: 800;
}
.showcase-content {
background:rgba(0,0,0,.2);
}
/* company info */
.info-content a {
color:#000;
}
#company-info {
height:400px;
}
#company-info .info-img {
width:50%;
min-height:100%;
background:url("https://images.pexels.com/photos/5093029/pexels-photo-5093029.jpeg?auto=compress&cs=tinysrgb&w=400");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.info-content {
display:flex;
flex-direction:column;
width:50%;
height:100%;
text-align:center;
justify-content:center;
align-items:center;
}
.flexclass {
display:flex;
height:100%;
}
/*services section */
.box {
width:25%;
text-align:center;
padding:15px;
line-height:1.2rem;
}
.box h3 {
padding-top: 6px;
}
</style>
</head>
<body>
<!-- navigation -->
<div id="navbar">
<div class="container">
<div class="content">
<h1 class="logo">JLG Enterprises</h1>
<ul>
<li>Home</li>
<li>About</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Item1
Item2
Item3
</div>
</li>
</ul>
</div>
</div>
</div>
<!--Showcase -->
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h1 class="headclass">Our Services cannot be beaten</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsam vel ut laborum obcaecati totam, necessitatibus reprehenderit nam quasi ad?</p>
</div>
</div>
</div>
<section id="company-info">
<section class="flexclass">
<div class="info-img"></div>
<div class="info-content bg-light">
<h2 class="info-head">The History of our Company</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis doloremque magnam, non expedita earum culpa.</p>
Learn More
</div>
</section>
</section>
<section id="services" class="flexclass">
<div class="box bg-primary">
<i class="fa-solid fa-mosquito fa-3x"></i>
<h3>Pest Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box">
<i class="fa-solid fa-droplet fa-3x"></i>
<h3>Irrigation Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box bg-primary">
<i class="fa-regular fa-image fa-3x"></i>
<h3>Landscaping Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box">
<i class="fa-solid fa-building fa-3x"></i>
<h3>Commercial Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
</section>
</body>
</html>
Related
I'm having an issue with my nav menu. There are 3 items in the menu Home About and Services. The services item is a drop down menu and I'm having a problem getting it to display properly when I hover over it. I'm close but can't seem to get it right. It appears to me to be a problem with the hover. There is a section in the CSS for the drop down menu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://kit.fontawesome.com/6eab1538de.js" crossorigin="anonymous"></script>
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
/* utility classes */
.btn {
background:darkgrey;
color:#fff;
padding:10px 13px;
}
h1,h2,h3 {
padding-bottom:30px;
}
p {
line-height: 1.5rem;
font-size: 1.2rem;
padding-bottom:20px;
}
.bg-light {
background:#e3d8d8;
}
.bg-primary {
background:#867e7e;
color:#000;
}
/* navigation */
.container {
margin:auto;
max-width:1300px;
}
li {
list-style:none;
padding:13px;
font-size:1.3rem;
}
ul {
text-decoration: none;
display:flex;
}
.content {
display:flex;
justify-content:space-between;
align-items:center;
height:70px;
}
#navbar {
height:70px;
background:#333;
}
a {
text-decoration:none;
color:#fff;
}
.content li a:hover {
background:#e6e6e6;
color:#000;
padding-top:24.5px;
padding-bottom:24.5px;
}
.logo {
color:#fff;
}
/* dropdown manu */
.dropbtn {
display:inline-block;
color:white;
padding-top:13px;
padding-bottom:13px;
padding-right:13px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown {
padding:0;
margin:0;
box-sizing:border-box;
position:relative;
}
.dropdown-content {
margin-top:8px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: blue;
padding:13px;
text-decoration: none;
display: block;
text-align: left;
}
/* li a:hover, */
.dropdown:hover {
background:#e6e6e6;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* this ensures that drop list is below drop item has to be block */
.dropdown:hover, .dropdown-content {
display: block;
}
/*showcase */
#showcase {
background:url("https://images.pexels.com/photos/6407570/pexels-photo-6407570.jpeg?auto=compress&cs=tinysrgb&w=400");
background-repeat: no-repeat;
background-position:center;
background-size:cover;
height:400px;
text-align:center;
display:flex;
align-items:center;
}
#showcase {
display:flex:
justify-content:center;
align-items:center;
}
.showcase-content h1 {
/* padding-bottom:30px; */
color:#fff;
font-size:2.5rem;
font-weight:700;
}
.showcase-content p {
/* line-height: 1.5rem;
font-size: 1.2rem; */
color:#fff;
font-weight: 800;
}
.showcase-content {
background:rgba(0,0,0,.2);
}
/* company info */
.info-content a {
color:#000;
}
#company-info {
height:400px;
}
#company-info .info-img {
width:50%;
min-height:100%;
background:url("https://images.pexels.com/photos/5093029/pexels-photo-5093029.jpeg?auto=compress&cs=tinysrgb&w=400");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.info-content {
display:flex;
flex-direction:column;
width:50%;
height:100%;
text-align:center;
justify-content:center;
align-items:center;
}
.flexclass {
display:flex;
height:100%;
}
/*services section */
.box {
width:25%;
text-align:center;
padding:15px;
line-height:1.2rem;
}
.box h3 {
padding-top: 6px;
}
</style>
</head>
<body>
<!-- navigation -->
<div id="navbar">
<div class="container">
<div class="content">
<h1 class="logo">JLG Enterprises</h1>
<ul>
<li>Home</li>
<li>About</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Item1
Item2
Item3
</div>
</li>
</ul>
</div>
</div>
</div>
<!--Showcase -->
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h1 class="headclass">Our Services cannot be beaten</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsam vel ut laborum obcaecati totam, necessitatibus reprehenderit nam quasi ad?</p>
</div>
</div>
</div>
<section id="company-info">
<section class="flexclass">
<div class="info-img"></div>
<div class="info-content bg-light">
<h2 class="info-head">The History of our Company</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis doloremque magnam, non expedita earum culpa.</p>
Learn More
</div>
</section>
</section>
<section id="services" class="flexclass">
<div class="box bg-primary">
<i class="fa-solid fa-mosquito fa-3x"></i>
<h3>Pest Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box">
<i class="fa-solid fa-droplet fa-3x"></i>
<h3>Irrigation Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box bg-primary">
<i class="fa-regular fa-image fa-3x"></i>
<h3>Landscaping Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box">
<i class="fa-solid fa-building fa-3x"></i>
<h3>Commercial Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
</section>
</body>
</html>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover
.dropbtn {background-color: #3e8e41;}
Why is my text not in
"Text overflow: ellipsis"?
I want my text to be directly in ellipsis and the excess text to be hidden when the containers slide.
You can find my code attached.
Thank you for help.
http://jsfiddle.net/5gLtraxh/12/
.wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description{ overflow:hidden;
text-overflow: ellipsis;
}
.description2{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.price{
position: absolute;
right: 0;
bottom: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
position: absolute;
right: -100px;
bottom: 0;
width: 100px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
right: 0;
}
.wrapper:hover .price {
transition: 1s;
right: 100px;
}
<div class="wrapper">
<h4 class="description">Lorem ipsum dolor sit amet, consectetur</h4>
<p class="description2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nulla
</p>
<span class="price"></span>
<div class="slide"></div>
</div>
You cannot use position: absolute in this case since it will make the <div> no longer takes up any space. You can position them with float for example:
.wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description
{
white-space: nowrap; /*I am guessing you want this*/
overflow:hidden;
text-overflow: ellipsis;
}
.description2
{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.price
{
float: right;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
float: right;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
.wrapper:hover .price {
transition: 1s;
right: 100px;
}
<div class="wrapper">
<div class="slide"></div>
<span class="price"></span>
<h4 class="description">Lorem ipsum dolor sit amet, consectetur</h4>
<p class="description2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nulla nihil fugit debitis assumenda reiciendis ab velit cupiditate blanditiis perspiciatis hic itaque reprehenderit, enim officia iusto, sint quod modi architecto!
</p>
</div>
Flexbox solution:
.wrapper {
display: flex;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
justify-content: space-between;
}
.description-wrapper {
min-width: 0;
}
.slider-wrapper {
display: flex;
}
.description
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.description2
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.price
{
flex-shrink: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
flex-shrink: 0;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
.wrapper:hover .price {
transition: 1s;
}
<div class="wrapper">
<div class="description-wrapper">
<h4 class="description">Lorem ipsum</h4>
<p class="description2">
Lorem ipsum dolor sit amet</p>
</div>
<div class="slider-wrapper">
<span class="price">sd</span>
<div class="slide"></div>
</div>
</div>
Hi i noticed when i collapse the text the code is not working as expected. Items are no longer at the end of the wrapper.
As you can see in the code below.
.wrapper {
display: flex;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description-wrapper {
min-width: 0;
}
.description
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.description2
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.price
{
flex-shrink: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
flex-shrink: 0;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
<div class="wrapper">
<div class="description-wrapper">
<h4 class="description">Lorem ipsuctetur</h4>
<p class="description2">
Lorem ipsum dolor sit ame</p>
</div>
<span class="price">33$</span>
<div class="slide"></div>
</div>
I have a container and an element withing it.
<div id="container">
<div class="myEm">
...
</div>
</div>
I need to assign width and hight to that element. It should be a square. I can calculate the width relative to the parent container, but how do I pass the same value to the height:
#container .myEm {
width: calc(100% - 20px);
height: ???
}
One way is to make the myEm resize using padding bottom (or top) to maintain its aspect ratio. This makes myEm strictly a sizing element and you'll need an element inside that will size to itself. Here's what I mean for example:
myEm becomes:
.myEm {
height: 0;
padding-bottom: calc(100% - 20px);
position: relative;
width: calc(100% - 20px);
}
Then you need an element inside with the actual content:
.myEm-inner {
background: red;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
Example: https://jsfiddle.net/dgmyxs9v/1/
You can save yourself the wrapping div by using pseudo elements.
This solution will create the same effect – but also make the div stretch to fit content – should it become too large to be contained by the square.
/* sane box-sizing */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
/* box styling */
.box {
margin: 10px;
padding: 10px;
width: calc(100% - 20px);
background-color: tomato;
font-size: 10px;
float: left;
max-width: 150px;
}
/* ––––––––––––––––––––––––––––––––––––-
This is the aspect ratio part
––––––––––––––––––––––––––––––––––––- */
.box::before {
/* aspect ratio keeper – 100% = square */
padding-bottom: 100%;
float: left;
}
.box::before,
.box::after {
content: '';
display: table;
clear: both;
}
/* second box */
.box:nth-of-type(2) { background-color: olive; }
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor facere maxime voluptatem nesciunt nihil repellendus culpa eligendi laudantium velit.</p>
</div>
<div class="box">
<h2>Will stretch to content</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor facere maxime voluptatem nesciunt nihil repellendus culpa eligendi laudantium velit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor.</p>
</div>
magento 2 admin backend has one user interface that when we click on widnow new sliding window comes from right side.for sample view go to
product->catalog->add product->image and videos tab-> and click addVideo button
how to implement this sliding effect in our custom module.if anybody know please help with this.very important to me.
That is implemented by using modal, you can use custom html in your admin form. here is normal example for basic html implementation:
.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 320px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content,
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.left .modal-body,
.modal.right .modal-body {
padding: 15px 15px 80px;
}
/*Left*/
.modal.left.fade .modal-dialog{
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{
left: 0;
}
/*Right*/
.modal.right.fade .modal-dialog {
right: -320px;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
right: 0;
}
/* ----- MODAL STYLE ----- */
.modal-content {
border-radius: 0;
border: none;
}
.modal-header {
border-bottom-color: #EEEEEE;
background-color: #FAFAFA;
}
/* ----- v CAN BE DELETED v ----- */
body {
background-color: #78909C;
}
.demo {
padding-top: 60px;
padding-bottom: 110px;
}
.btn-demo {
margin: 15px;
padding: 10px 15px;
border-radius: 0;
font-size: 16px;
background-color: #FFFFFF;
}
.btn-demo:focus {
outline: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container demo">
<div class="text-center">
<button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal2">
Click Here
</button>
</div>
<!-- Modal -->
<div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel2">Right Sidebar</h4>
</div>
<div class="modal-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</p>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
</div><!-- container -->
I have this ajax function
$.ajax({
url: requestUrl,
type: 'get',
dataType: 'html',
beforeSend: function() {
},
complete: function() {
},
success: function(html) {
var tab_item = document.getElementById(tab);
try{
tab_item.innerHTML = html;
}catch(e){
tab_item.innerText = html;
}
}
});
}
}
with tab and requestUrl vars set before ajax.
The response is
<p>&</p>
<p>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
</p>
<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255); ">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.</p>
</div>
<p>&</p>
It is placed in a div and looks like this
<p> </p> <p> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> </p> <div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255); "> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.</p> </div> <p> </p>
Instead of try-catch I used $('#'+tab).html(html) and $('#'+tab).text(html) but they either don't have result or the result is the same. I also tried the json dataType but I had similar problems.
What do I miss ? Should I use a different DOM element ?
It seems that your server it's sending you an html encoded response. I think you should html decode the response before inserting it in the tab.
You can do it so by using a javascript html decoder or use the trick from this post:
How to decode HTML entities using jQuery?
Basically it is:
var decoded = $("<div/>").html(encodedStr).text();