The JQuery UI Accordion widget doesn't work with longer scrollable content in IE7 when any parent container div has overflow:auto; set on it. I tried setting the innermost child div of the Accordion to overflow:visible !important; but it didn't work. Works fine in IE8, IE9, IE9 compatibility mode, Chrome, FF, Opera, and Safari.
Test this fiddle in IE7. Be sure to explicity set IE to use "Browser mode: IE7" and "Document Mode: IE7 standards".
How to fix?
<div style="overflow:auto;">
<div id="accordion" style="overflow:visible;float:right;height:400px;width:500px;border:2px solid red;float:right;">
<h3>Section 1</h3>
<div>
<script type="text/javascript">
for (var i=0; i<10; i++)
{
document.write("<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>");
document.write("<ul>");
document.write("<li>List item one</li>");
document.write("<li>List item two</li>");
document.write("<li>List item three</li>");
document.write("</ul>");
}
</script>
</div>
<h3>Section 2</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
</div>
So it turns out it's a bug in the current version of jqueryui accordion.
See the jqueryui bug report here.
Related
I have a problem with the autoplay video background on the Safari desktop.
AutoPlay works fine in Firefox, Chrome etc, but not in Safari, how can I fix it?
Bellow my code:
<header class="relative flex items-center justify-center h-screen mb-12 overflow-hidden">
<div class="relative z-30 p-5 text-2xl text-white bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<video autoplay loop muted class="absolute z-10 w-auto min-w-full min-h-full max-w-none">
<source src="https://assets.mixkit.co/videos/preview/mixkit-set-of-plateaus-seen-from-the-heights-in-a-sunset-26070-large.mp4" type="video/mp4" />Your browser does not support the video tag.
</video>
</header>
<div class="max-w-lg m-auto">
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat a
magna non varius. Proin leo felis, euismod non porta eget, varius sit amet
sapien. Maecenas in nulla at leo convallis consectetur id a sapien. Nulla
nec pulvinar nisi. Vivamus non facilisis lacus, et volutpat libero. Nulla ac
odio aliquam, accumsan arcu ut, lacinia est. Nulla eu sem elit. Fusce nec
laoreet sem, semper molestie libero.
</p>
<p class="mb-4">
Ut sagittis lacus consequat accumsan venenatis. Sed sollicitudin, lectus et
fringilla ultrices, dolor nisi scelerisque tortor, vel finibus magna massa
non nunc. Phasellus massa quam, egestas a nisl sed, porta volutpat metus.
Nunc sed elit ac tellus tempor cursus. Suspendisse potenti. Vestibulum
varius rutrum nisl nec consequat. Suspendisse semper dignissim sem viverra
semper. Nulla porttitor, purus nec accumsan pharetra, nisi dolor condimentum
ipsum, id consequat nulla nunc in ligula.
</p>
<p class="mb-12">
Nulla pharetra lacinia nisi, vitae mollis tellus euismod id. Mauris porta
dignissim hendrerit. Cras id velit varius, fermentum lectus vitae, ultricies
dolor. In bibendum rhoncus purus vel rutrum. Nam vulputate imperdiet
fringilla. Donec blandit libero massa. Suspendisse dictum diam mauris, vitae
fermentum dolor tincidunt in. Pellentesque sollicitudin venenatis dolor,
vitae scelerisque elit ultrices eu. Donec eget sodales risus, quis dignissim
neque.
</p>
</div>
Live preview:
https://codepen.io/zdebskimatt/pen/yLqqZdN
ps.
How can I add a static image if the video does not play automatically on desktop, mobile?
I want to create a div of max width 200px; how can i auto increase the height in my div? can some help me which css properties should i use ?
my use case is my width of box should be constant but the text i keep in the box should not come out of the box and if excess is there height of the box should increase dynamically ?
This can be easily done. You can use below code :
min-height: 100px;
overflow: hidden;
Let me know if it doesn't resolve, I will help you with this.
If you set width of your div, it's height will automatically adjust to fit the content. There is nothing you need to do for this to work.
div {
max-width: 200px;
/* For clarity */
border: 1px solid black;
}
<div>Hello</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Cras pede libero, dapibus nec, pretium
sit amet, tempor quis. Vestibulum fermentum tortor id mi. Mauris dictum facilisis augue. Etiam quis quam. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Curabitur sagittis hendrerit ante. Integer vulputate sem a nibh rutrum consequat. Nulla quis diam. Mauris elementum mauris vitae tortor. Aenean placerat. Nunc tincidunt ante vitae
massa. Pellentesque sapien. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras elementum. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Itaque earum rerum hic tenetur a sapiente
delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Mauris elementum mauris vitae tortor. Integer imperdiet lectus quis justo. Duis risus. Etiam egestas wisi a erat. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi scelerisque luctus velit.
</div>
I am unable to read the HTML tags used in content of JSON file in my react app..
The JSON file :
[{
"_id": 9,
"title":"Text 9",
"subheader":"Dummy header 9",
"images": "images/four-1.png",
"imagesmob" : "images/four-1.webp",
"content":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec velit consectetur, pretium risus vel, eleifend tortor. Integer enim nulla, iaculis sit amet leo vel, sagittis maximus leo. Aliquam semper sapien bibendum nulla consectetur, ut eleifend arcu accumsan. Duis consequat diam sed dolor convallis semper. Ut justo mauris, accumsan non tempus ut, ultrices at tellus. Quisque a sapien urna. Maecenas tempor consequat sollicitudin. Nullam volutpat a eros sit amet vestibulum. Cras sollicitudin vitae urna nec varius. Etiam nec facilisis urna.</p> <p>Donec ut dui condimentum, tincidunt tellus vitae, interdum lorem. Phasellus eget pretium enim. Morbi accumsan turpis vitae turpis venenatis ullamcorper. Proin pretium nisi nec nulla faucibus, a hendrerit turpis malesuada. Nullam id faucibus metus, id faucibus metus. Donec et massa suscipit, congue tortor non, ultricies turpis. Aliquam venenatis massa velit, id ornare ante efficitur vitae. Vivamus id dui tortor. Pellentesque sem mi, bibendum a orci hendrerit, mollis eleifend eros. Nunc sodales orci purus. Vivamus molestie porta egestas. <p>Suspendisse convallis mi ullamcorper, dapibus nisi a, semper felis. Praesent ut lacus eu neque vestibulum efficitur.<\/p> Sed dolor magna, mattis a ultricies vel, <b>tincidunt<\/b> eget enim.<\/p>"
}
]
The react file
<Card variant="outlined" sx={{ maxWidth:345, borderRadius: '11px' }} elevation={3}>
<CardMedia
component="img"
height="194"
image={welcom.images}
alt="Home Page"
/>
<CardHeader
titleTypographyProps={{fontSize: 18, fontWeight: 'bold', color: 'purple' }}
title = {welcom.title}
subheader = {welcom.subheader}
/>
<CardContent>
<div>{welcom.content}</div>
</CardContent>
</Card>
In this when I am trying to read content from the json file , i am unable to get the text which is bold or paragraphs are also not coming. Any help.
You cannot render the raw html in React. For that you can use the dangerouslySetInnerHTML attribute, but you should be careful before using this attribute. As per reactjs document,
dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.
I have created based on your code.
I find this problem with ng-repeat that the tag where it is used is also gets repeated, how to repeat only the elements inside it?
<div class="accordions" ng-repeat="event in eventsData">
<!-- content-title -->
<div class="content-title active">Donec mollis magna quis urna convallis, quis faucibus sem vestibulum. Sed vehicula suscipit lacus</div>
<!--/content-title -->
<!-- accordions content -->
<div class="content">Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
<!--/accordions content -->
<!-- content-title -->
<div class="content-title">Sed vehicula suscipit lacus, eget cursus justo aliquet in. Etiam aliquet vel ipsum ultrices auctor</div>
<!--/content-title -->
<!-- accordions content -->
<div class="content">Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
<!--/accordions content -->
</div>
AngularJS has a feature for that: ng-repeat-start and ng-repeat-end. They allow you to avoid a wrapper altogether, because they don't incur nesting.
<div class="accordions"> <!-- !! No repeat here -->
<div class="content-title active"
ng-repeat-start="event in eventsData"
>Donec mollis magna quis urna convallis, quis faucibus sem vestibulum. Sed vehicula suscipit lacus</div>
<div class="content">Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
<div class="content-title">Sed vehicula suscipit lacus, eget cursus justo aliquet in. Etiam aliquet vel ipsum ultrices auctor</div>
<div class="content"
ng-repeat-end
>Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
</div>
The repeat will be active starting from the element that has the ng-repeat-start="...", up to the element that has the ng-repeat-end.
See the ngRepeat docs.
Assuming that class content-title and content have to be repeated over eventsData.
Do this,
<div class="accordions">
<div class="wrapper" ng-repeat = "event in eventsData">
<!-- content-title -->
<div class="content-title active">Donec mollis magna quis urna convallis, quis faucibus sem vestibulum. Sed vehicula suscipit lacus</div>
<!--/content-title -->
<!-- accordions content -->
<div class="content">Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
</div>
</div>
I'm just learning angular and have a problem i just can't figure out how to solve it.
I'm trying to achieve the following.
Tab A / Tab B / Tab C
.................................
Content in a fixed height Container
When i click a tab, some content is loaded via json and displayed in the container. Since its a lot of content i get a scrollbar.
What i want to do now is: Store the scrollTop Position for each Tab, so you can continue reading where you left when you switch tabs.
At the moment i have a directive on the content div, that triggers whenever the div gets scrolled, and stores the scrollTop Position in an array, related to the tab that is currently active.
app.directive("scrollPosition", function(){
return{
restrict: 'A',
link: function(scope , element){
element.bind("scroll", function(){
scope.scrollPosition[scope.tab.categoryIndex]=element.scrollTop();
});
}
}
})
This works so far.
But i have no clue how to use this stored ScrollTop Value to set the div to that position when i click of one of the tabs.
Whats the proper angular way?
Using an ng-click on the tabs and then scroll the div?
Using something like a $watch inside the directive to see which tab is clicked?
Help would be much appreciated, since i could only find examples where the whole document was scrolled, which is easy to address. But i just don't know how to get this relationship between the tab buttons and the div.
Thanks
Markus
Look into $anchorScroll. You can set a yOffset on it before call the function.
$anchorScroll.yOffset = 122;
$anchorScroll();
https://docs.angularjs.org/api/ng/service/$anchorScroll
Update:
So I solved this. My first answer was too hasty.
Here is a link to plnkr(also embedded into post though): http://embed.plnkr.co/kwPkFDfyJctfPRFPPLyk
Scroll the first tab, click on the second tab, then back in the first.
I added a pos variable to the isolate scope of the directive and passed in scope variables from the main controller. This way the directive can set the scroll position on a two-way bound variable. The next time the tab is clicked on, the directive sets its the scroll position on its element to the last scrolled to position via its scope.pos variable. Hope this helps!
(function() {
'use strict';
var app = angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
"title": 'One',
"url": 'one.tpl.html',
"pos": 0
}, {
"title": 'Two',
"url": 'two.tpl.html',
"pos": 0
}, {
"title": 'Three',
"url": 'three.tpl.html',
"pos": 0
}];
$scope.$watch('tabs', function(val) {
console.log("Yay!!! It's working! Val=" + val[0].pos);
}, true);
$scope.currentTab = $scope.tabs[0];
$scope.onClickTab = function(tab) {
$scope.currentTab = tab;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab.url;
};
}]);
app.directive("scrollPosition", function() {
return {
restrict: 'A',
scope: {
pos: "="
},
transclude: false,
link: function(scope, element) {
element[0].onscroll = function() {
scope.pos = element[0].scrollTop;
console.log(scope.pos);
scope.$apply();
};
element[0].scrollTop = scope.pos;
}
};
});
})();
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 5px 0px 5px;
background-color: #CCC;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
#viewOne, #viewTwo, #viewThree {
overflow: scroll;
height: 200px;
}
.active {
background-color: #FFF;
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab.url"></div>
{{currentTab.pos}}
</div>
<script type="text/ng-template" id="one.tpl.html">
<div id="viewOne" scroll-position pos="currentTab.pos">
<h1>View One</h1>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div id="viewTwo" scroll-position pos="currentTab.pos">
<h1>View Two</h1>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
<script type="text/ng-template" id="three.tpl.html">
<div id="viewThree" scroll-position pos="currentTab.pos">
<h1>View Three</h1>
<p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet
arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
</div>
</div>
</body>
</html>