I have a design where on mobiles/tablets all the text is in one div but when on 'desktop' the p tags move to the div below it. (All divs have different background images).
Here's the markup -
<main>
<div class="pane">
<h2>A thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>Another thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>A third thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>A fourth thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>The last thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
</main>
Demo: http://codepen.io/sturobson/pen/aCqDc
So, when the page hits 48em (768px) the <p> in .pane needs to drop down into the following .pane-details
How do I do this without duplicating the content and nastily resorting to display: none;.
Use the window resize event:
$(window).on('resize'), function() {
if ($(window).width()<768) {
// move the element
} else {
// move it back
};
}).trigger('resize'); // force it to run on load
However, you can probably solve this with pure CSS if you rethink your HTML layout a little.
Related
I am using fullpage.js and the scroll does not work after the 'intro' class section. I am able to move upwards in the webpage but while moving downwards it stops after the 'intro' class section. I even tried using normalScrollElements but it still does not work. The code is as below:
<div id="fullpage">
<div class="section">
Hello
</div>
<div class="section">
Hello
</div>
<div class="section">
Hello
<div class="intro">
/* Dummy Text */
</div>
</div>
<div class="section">
Hello
</div>
</div>
Link to Codepen: https://codepen.io/yash9051/pen/rNpXNYJ
My question is pretty simple. I have div1 that has a variable offset().top depending on other elements of the page. I want to insert an absolute div next to it (basically with the same absolute top) either with just css or with javascript too.
HTML looks something like
<div>
<div id="div2">stuff</div>
</div>
<div>
<div>some divs</div>
<div id="div1">div1 stuff </div>
</div>
Since in the comments you say you want to place div2 after it has been inserted in the DOM, you can try the following:
$('#div2').css('top', $('#div1').offset().top - $('#div2').offset().top)
#div1, #div2 { display:inline-block; }
and
<div id="div3">
<div>
<div id="div2">stuff</div>
</div>
<div>
<div>some divs</div>
<div id="div1">div1 stuff </div>
</div>
</div>
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}
I'm trying to find a way to make a replace button on my page. I've looked around the web but all I found was a replace text script. What I want is to replace both the text in my h1 tag and the text in the article. If its possible to just replace the whole div with another div it would be great.
To explain a bit more accurate on my page: www.bravitus.com
I want at the "OM MIG" section, a button where I could switch out the content, for something else like some info about bravitus. I'd like a button to click that replaces only the orange section.
Here's a bit of my mark-up:
<div class="full-page" id="page-2">
<div class="container">
<h1 style="color:white;" >Hvem er jeg</h1>
<div class="columns eight"><article> Lorem ipsum </article>
</div>
I want to replace all content in the page-2, or just switch out the whole page-2 div with another.
Is that possible?
Here we go, a small demo on jsFiddle (http://jsfiddle.net/json/8cu34y4L/).
There are three buttons with the data-switch attribute. The attribute indicates what block inside the page-2 will be shown, when the button is clicked.
HTML
<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2">
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e) {
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I'm not sure if I understood what you want.
But if you just want to replace all html inside page-2, you simply can do that (with jQuery):
var html = // Here comes your html
$('#page-2').html(html);
So im not sure if this is the correct way but what i ended up doing was this
function myFunction(){
document.getElementById("fisk").innerHTML = "Hvem er du"
}
<button onclick="myFunction()">Click me</button>
Now i just have to find a way to make it replace more than text. to replace divs and other tags all together.
Just add this link and execute the below code:
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
Click to read about me
Click to show my education
Click to read about the name Bravitus
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e)
{
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I'm using the fabulous fullpage.js to make a single page website.
Here's the basic code:
<div id="fullpage">
<div class="section" id="section0">
<h1>Page 0</h1>
<p>Some text 0</p>
</div>
<div class="section" id="section1">
<h1>Page 1</h1>
<p>Some text 1</p>
</div>
<div class="section" id="section2">
<h1>Page 2</h1>
<p>Some text 2</p>
</div>
</div>
What I can't figure out is how to include a link in section 0 to section 2 (i.e. just a standard <a href> link). I've been messing around with anchors but can't get it to work.
You only need to use the anchors option and then use normal links:
$('#fullpage').fullpage({
anchors: ['section1', 'section2', 'section3', 'section4']
});
The link should look normally, but prefixed bye #:
Link to section 3
Live example
Your URLs will look like:
http://yoursite.com/#section1
http://yoursite.com/#section2
http://yoursite.com/#section3
http://yoursite.com/#section4
Now it is also possible to use the html attribute data-anchor="section1" in each section in order to define the anchor for it. For example:
<div id="fullpage">
<div class="section" data-anchor="section1">Section 1</div>
<div class="section" data-anchor="section2">Section 1</div>
</div>