On my website I have used v-cloak with css property [v-cloak] {display: none} to hide the content before the vue script is loaded. I want to hide the content only inside the div, however, all the content below the closing tag of the div is also hidden. Is there a way to fix that?
How my code looks:
<!-- Content I want to be displayed -->
<div class="..." v-cloak>
<!-- Content that I want to be hidden before the vue script is loaded -->
</div>
// Content I want to be displayed
<!-- Content I want to be displayed -->
Related
I use the Bootstrap responsive width class .container on two pages with almost the same content, like so:
<html>
<head>
</head>
<body>
<div class="container">
<!-- page content here-->
</div>
</body>
</html>
I notice that when I navigate from one page to the other (using the navbar), the contents of the second page appear to start at a greater distance from the left margin than the first. Therefore, when transitioning to the second page, it looks like the content has moved to the right. I'm not resizing the browser. Why does this happen?
This behavior does not happen using .container-fluid.
I've got an input that fires a jQuery toggle to switch between content in two different divs... two separate menus in this case.
Because one menu is much longer than the other, I placed that input within an a-tag that scrolls up to the top of container so if the user is at the bottom of the long menu and then switches to the short menu, they're not stuck way at the bottom of the container. One menu is quite long, especially on mobile viewports.
Everything works exactly as intended, but it's throwing an HTML5 validation error because an a-tag can't contain an input.
Any suggestions on keeping the functionality but eliminating the error?
The HTML:
<section id="menu-bin">
<div id="menu-1">
<!-- A Bunch of Menu Content -->
</div>
<div id="menu-1">
<!-- A Bunch of Menu Content -->
</div>
</section>
<div class="button-switches">
<a class="scrolly" href="#menu-bin">
<!-- Forces scroll to top of menu (important for mobile) -->
<input id="menu-switch1" type="button" value="Switch Menus" /></a>
</div>
So I have a parallax scrolling web page you can see it here I would like to be able to have a link my blog which obviously is not on the same page because its not a regular style web page. I have gotten the ribbon/banner to show up on a page that is not like my web page, you can see it here. I'm simply using a div to show it.
<div class="wrapper">
<div class="ribbonw"><div class="ribbon"><a href="google.com">Visit my blog </div>
</div>
</div>
How would I add it to the web page with out screwing up the page. I have done some research on how to make the banner, but I'm not sure how to add it to the page because when ever I do it just either doesn't show up on the page or is just a long white strip on the page.
So to summerize up what I'm asking is how do I add a banner like the one on the second link to my page I would like it to look something like the banner on this page.
To answer the question for future users what I had to do was add the code above into the actual first "slide" or first div. What I mean by that is that in a parallax scrolling page you have your pages split up into divs. So i just had to add my banner into the first div. It looks something like this:
<!-- begin slide 1 -->
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="wrapperr">
<div class="ribbonw">
<div class="ribbon">
Visit my blog
</div>
</div>
</div>
more content here
</div>
<!-- end slide 1 -->
as you can see I just had to add the content into the slide. I had it outside before therefore creating another slide.
I am working on converting a twitter bootstrap theme into a wordpress theme and adding onto it.
I am having issues adding full width items into the theme. I have tried adding a slider plugin that is set to full width. Although when it is added it goes to a fixed width, the same happens if I add an image aswell. It seems all of the content in my page does this except for my header and footer.
Also it seems every time I add in anything to the page the page/footer gets messed up. I am still learning css though.
I am posting a link to the site to see if anyone can take a look and give me a hand.
http://goo.gl/8JUDA
It looks like you contained the element that you want to stretch the size of the window within a .container div.
.container is used in bootstrap for fixed layouts. Instead try using the .container-fluid class.
For example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
Read more: http://twitter.github.io/bootstrap/scaffolding.html#layouts
I'm developing Chrome plugin. I would like to implement its interface as line with content that will be displayed before site content starts (similar to stackoverflow information bar). I'm not good at HTML and CSS.
1. How can I implement it to work correclty at any site?
2. What HTML code is best to use to make rectangle that will be correctly displayed at top of any site?
1- Make sure the HTML you inject is right after the Body Tag.
2- With CSS, put it Width 100%; position: fixed (it is always on the top of the browser) or position: absolute (always on the top of page); top:0; z-index: 999 (its always on top)
(Some minor adjustments might be to do, Its off the top of my head)
3- Aim for the first element after your bar (should be a container) and apply it a margin-top of the height of your added element.
Should create a bar on top where you can put any thing you want.
The simplest way to do it is to just add a <div> to the beginning of the body:
<!-- old -->
<body>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
<!-- new -->
<body>
<div>Your content goes here.</div>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
Because the <div> is a block-level element, it should stretch across the screen by default, and then you can style it however you like.
However, there are two basic problems:
The site's CSS interferes with your bar. This could show up in the form of styles that you make sure you declare, so that your bar doesn't look funny. Or it could mean that some elements on the page were positioned absolutely, and you adding the bar breaks the layout.
The site's JS interferes with your bar. If the site itself dynamically adds elements to the beginning of the <body>, then your bar will be pushed down the page. What if the JS selects all the <div>s on the page, and fades them out?