I have a full-width FlexSlider with in every slide an image and some HTML content on top.
<li>
<img src="http://placehold.it/350x150">
<div class="box"></div>
</li>
But for some reason, the HTML content appears only after the slide animation.
Here's a JSFiddle: http://jsfiddle.net/39wPU/1/
I'm thinking it may have something to do with the overflow property on the div with class "flex-viewport". If you disable it, the problem goes away (but another one arises - i.e. having a very large horizontal overflow).
The problem returns whenever you place an overflow:hidden on any containing element.
What am I missing here?
UPDATE: It seems the problem only occurs in Chrome. Safari and Firefox are fine.
Add the following to your .box selector:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
Related
I'm trying to use a CSS transition in a similar manner to https://htmx.org/examples/bulk-update/ to show which row was updated, but I can't get it to work for my example using HTMX 1.3.3
The relevant HTML is:
<div id="replace-me">
<div id="A" hx-get="/A" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">A</div>
<div id="B" hx-get="/B" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">B</div>
</div>
When either div A or div B is clicked, the server returns the above HTML again, but with class="updated" applied to the div in question.
I also have the following CSS:
.htmx-settling .updated {
background: darkseagreen;
}
.updated {
border: 1px solid black;
}
I would expect to see the clicked div show a border and also flash green. However what I observe is:
I click on div A.
div A shows a border but does not flash.
I click on div B.
div B shows a border, but div A flashes.
From then on, the div that I click on shows a border, but the div that was clicked on the previous turn flashed.
I'm guessing this is something to do with the timing of the application/removal of the htmx-settling class combined with when the swapped content gains the new class. I've read https://htmx.org/docs/#request-operations and https://htmx.org/docs/#css_transitions, but can't see where I'm going wrong.
AFIAK you need transition in you CSS, like from https://htmx.org/docs/#css_transitions
.red {
color: red;
transition: all ease-in 1s ; <========= missing?
}
I'm designing a joomla horizontal scroll website by specifying the width of the body to be 4500px wide and absolute positioning the content I want (tried loads of different ways and this one works the best for me). The problem is bootstrap tooltips dont position themselves correctly if I specify data-position"bottom"
I've tried adding { container: 'body' } to the js tooltip initialisation but it does not fix the problem (as the width of the body is wider than the viewport).
It's annoying the heck out of me, can anyone help please.
I've create a bootply and the code is below for reference
http://www.bootply.com/x1xfg7Z19J
The JS is as follows:
$("[data-toggle=tooltip]").tooltip({container:'body'});
the CSS is as follows:
body {
width: 4500px;
position:relative;
height: 100vh;
overflow-x: visible;
}
.dyno {
position: absolute;
transition: none;
}
.zap-fb {
background-color:#456789;
background-size: 100% 100%;
}
.zap-fb:hover {
background-color:#453698;
}
.zap-li {
background-color:#763456;
background-size: 100% 100%;
}
.zap-li:hover {
background-color:#854a34;
}
.zap-pi {
background-color:#912643;
background-size: 100% 100%;
}
.zap-pi:hover {
background-color:#7269c3;
}
The HTML is as follows:
<p>Scroll to the right to see the tooltip issue. If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left. If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>
EDIT: posted the problem on the bootstrap github issues page: official response "Closing as a won't fix since it's v3." So I guess it is an issue but one that I've got to live with. I did try the scenario with bootstrap 4alpha and the tooltips position themselves correctly.
EDIT 2: using bootplys bootstrap version select, I've found that prior to the introduction of bootstrap 3.2.0, tooltips aligned correctly. I'll try and download 3.1.1 and see if I can spot the error.
I've encountered an odd behavior in a Windows8 app that I'm building with WinJS, javascript, and HTML. In a particular Page that I'm implementing, there are several divs that have CSS rules like this:
.col {
border: 1px solid none;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
margin: 0px;
width: 100%;
}
The problem is when I invoke the main app bar by right clicking, the scrolled content in the div snaps to the top of the div. In other words, the scroll position of the div is lost. I've tried a host of ways to fix, but nothing has come up. How can I prevent the scrolled content from jumping around upon invoking the App Bar.
Thanks!
suggest to use -ms-grid for the page. The app bar will overlap the div in that case, which is ok and likely right behavior that you can see in other apps also.
html:
<div class="test5 fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">test page</span>
</h1>
</header>
<section class="content" aria-label="Main content" role="main">
<div class="test-content">
Text here.
</div>
</section>
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div>
css:
.test5.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
#Sushil is correct. AppBar is an overlay control, so you should place it next to the fragment div, not inside it. #Sushil's code shows how to do it.
Placing an appbar inside the fragment has performance penalties as it will need to be rendered every time a user navigates to that page. Another undesirable side effect is that all input to the appbar will propagate to the fragment. This is the problem you are facing.
In theory, you can listen to the various input events for mouse, keyboard, touch and call preventDefault on them. But it is not recommended.
I am using AnythingSlider to place content on this dev for a new site:
http://sitedev.lcadfiles.com/interactive_barrett.html
When the slider first loads on a given page, there is a slight jump (the entire slider, arrows, etc. moves a few pixels before settling into the correct position). After landing, it all appears to work fine. The shift doesn't appear to be browser specific, as it occurs on my older and newer machines with 4 different browsers (and various browser versions).
Is there something I have set wrong? I assume it might be somewhere global, like the anythingSlider.js (or perhaps the .css - though this seems less likely), but didn't see anything that stood out.
Had the same problem. A quick workaround (works for me).
eg. you have html code like below, add a style="visibility:hidden;" to your anythingslider container.
<div id="slider_nest" style="visibility:hidden;">
<ul id="your_anythingslider">
...
</ul>
</div>
in the js code, change the style to visible when document ready. eg.(JQuery)
jQuery(document).ready(function($) {
$('#slider_nest').css('visibility', 'visible');
...
$('#your_anythingslider').anythingslider();
...
}
Hope it helps!
Update: add a slider mask with a loader gif.
eg. in the html, you will have something like below:
<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center; display:block; height:568px; width:1050px; margin:0 auto;">
</div>
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;">
<ul id="your_anythingslider">
...
</ul>
</div>
Now in the js (JQuery):
jQuery(document).ready(function($) {
$('#slider_mask').hide();
$('#slider_nest').css({'display':'block'});
...
OMG, this finally solved our problem! Thank you.
Since I'm using the Wordpress plugin on a custom theme, I had to adjust it a bit like this:
Add this before the shortcode in the header.php file:
<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;">
</div>
Add this in the section of header.php file:
<script type="text/javascript">
$(document).ready(function(){
$('#slider_mask').hide();
$('.anythingSlider').css({'display':'block'});
}
Add this to the CSS file:
.anythingSlider {display:none;}
I'm trying to create a website with a background-size:100% 100% css rule. It's an image that sits behind the content and is designed in such a way that no matter the dimensions of the browser window it still works well.
I think the rule I have (as below) is clashing with Blueprint somehow.
body {
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
This should generate a perfect 100% background image, however, the results I'm getting is that the background finishes where the content finishes, regardless of the browser window size.
Here are two images of what I want and what I'm getting:
EXPECTED
WHAT I'M GETTING (regardless of browser size)
Please help me, I'm not sure how to proceed with this.
Here is my HTML setup for the page:
<body>
<div class="container">
<div id="navbar" class="span-6 last">
<div id="logo" class="span-6 last"></div>
<div id="menu">
<ul>
<li class="menu-current">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="content" class="span-18 last">
</div>
</div>
</body>
If the container is 550px high then the background ends 550px down the page with an empty white space beneath that area.
I was able to replicate the effect on JSFiddle:
http://jsfiddle.net/danhanly/TurW5/4/
Would be nice if you can show us your HTML and CSS that way maybe I can pin point what your doing wrong.
You can write.
html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
margin:20px auto;
width:960px;
overflow:hidden}
Adding a min-height to the body that is equal to the height of the background-image will ensure that the body is large enough to display the entire background.