I'm using Skrollr across my portfolio for some text fading effects. All of my text is responding to the Skrollr data anchors with the exception of any link text wrapped in < a >. The < p > below, containing the < a >, fades in correctly, but < a > retains the default page styling. Any ideas on why and how i can fix it?
<div class="card" id="about">
<div id="aboutwrapper" data-350="color:rgb(255,255,255);"
data-700="color:rgb(170,170,170);" data-1000="color:rgb(20,20,20);">
<p>Blah blah blah blah</p>
<p>blah blah blah blah My Link Text
blah blah blah </p>
</div>
</div>
It is because <a> elements do not inherit color property of parent elements by-default. Try to add this line to your CSS: a {color: inherit}
Related
I am attempting to modify the Dark Nav with White Page Header template in TailwindUI/Vue (https://tailwindui.com/preview#component-10058606cac5398d7fa2c73b64089874). I wish to add a background color to the template. To do this, I attempted to add class="bg-amber-300" to the top-level div:
<div class="bg-amber-300 min-h-full">
///
</div>
...but that did not work. I also tried adding a color class to the main tags further down in the template:
<main class="bg-amber-300">
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Replace with your content -->
<div class="px-4 py-6 sm:px-0">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
<!-- /End replace -->
</div>
</main>
But that also did not work. In both cases there is still a large white gap at the bottom of the view. How can I add background color so that the entire view below the nav bar is filled?
I think it's working as it should because min-h-full means to take the full height which is specified in the content section as h-96
if you want to get rid of the white space give the top-level div this class
min-h-screen bg-amber-300
https://play.tailwindcss.com/fGw3zeIf4n
On my page I have multiple divs that look like that:
<div v-show="currentPage == 1" class="row">
...
</div>
<div v-show="currentPage == 2" class="row">
...
</div>
<div v-show="currentPage == 3" class="row">
...
</div>
currentPage is a variable defined in the vue script. The value of currentPage could be changed by changing the value after # in the URL. Problem is that when the page is loaded, for a very brief moment, the content of all pages is displayed and then, only the content of the desired page remains. I would like to ask how I could eliminate the initial flashing of all the content when entering the page.
I have a div inside of a Bootstrap modal dialog, using the AngularJS directives for Bootstrap.
The visibility of the div is hidden by default. This will change later on in response to a user action (e.g., clicking a button or form field). The problem I'm having is, even though the div is hidden, its contents are still occupying space in the modal body.
In other words, the height of the modal body includes the contents of the hidden div, even though it's hidden. I don't want this to happen.
Here's a contrived example of the modal template, including the div that I have set to hidden in the CSS:
<script type="text/ng-template" id="modal.tmpl.html">
<div class="modal-header">
<h3>Modal</h3>
</div>
<div class="modal-body">
<div>I'm a modal.</div>
<div class="hidden-div">
Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test
<br/> Test <br/> Test <br/> Test <br/>
</div>
</div>
<div class="modal-footer">
Modal footer here
</div>
</script>
It's probably easier to demonstrate what I mean with a fiddle. If you check out this fiddle, and click "Open Me", you should see what I mean.
The div with all of the "test" text is hidden, but the height of the modal body is still based off of it. How can I fix this?
Thank you for any help!
The hidden-div makes use of visibility: hidden. Although it hides the contents, but doesn't makes up for the space.
Read more about this.
To solve it, one should make use of display as below:
.hidden-div {
display: none;
}
Instead of using visibility use the display property.
https://www.w3schools.com/cssref/pr_class_display.asp
.hidden-div {
display: none;
}
Is it possible to draw line between the container and a draggable element during dragging using 'dragula' lib? When the element is dropped, the line should disappear.
<div [dragula]='"my-bag"'>
<div class="draggable-item">
<div class="my-drag-indicator">
// style your line here
</div>
<div class="my-drag-content">
// your content here
</div>
</div>
</div>
while dragging, you will have a clone image of your item, dragula will add 'gu-transit' class to it.
As the structure above, you can style your .draggable-item.gu-transit to hide the '.my-drag-content' and show the 'my-drag-indicator'
I'm trying to create a page with a few galleries using the Magnific-Popup jQuery plug-in. I different sections contained in divs with separate ids and a .gallery class containing the images.
<div id="content_1">
<p>Some content</p>
<div class="gallery">
<img src="img/pic_1.jpg">
<img src="img/pic_2.jpg">
</div>
</div>
<div id="content_2">
<p>More content</p>
<div class="gallery">
<img src="img/pic_3.jpg">
<img src="img/pic_4.jpg">
</div>
</div>
To get the galleries to be separate in the popup I initialized the script multiple times for each content section. When I do this, however, after the first content section, there are more images in the gallery popup (twice as much to be exact) than I linked to. I'm new to javascript, so I'm not sure if I'm just missing something obvious.
From the documentation:
To have multiple galleries on a page, you need to create a new
instance of Magnific Popup for each seperate gallery. For example
<div class="gallery">
Open image 1 (gallery #1)
Open image 2 (gallery #1)
</div>
<div class="gallery">
Open image 1 (gallery #2)
Open image 2 (gallery #2)
Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.
</div>
Javascript
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
Hope that helps!