I'm running a Joomla website, and am trying to embed a launcrock-widget (launchrock is a service that lets people interested in your project enter their email, so when you're done you can email them), but I can't really adjust the size of it. The widget comes in 1 line of javascript code that I put in a Joomla article using the Sourcerer Code Helper plugin.
The widget is embedded here:
http://cavemanskin.com/index.php/14-day-meal-plan-widget
Now there are 2 problems: for some reason 1) the widget takes up the whole page and 2) the grey box under the text is gone so you can't really read it.
With 'inspect element I noticed that Launchrock puts everything in a DIV named 'lr-widget'.
I added the code:
<style type="text/css">
div#lr-widget { height:300px; width:300px }
</style>
But the widget is still the same size.
Can anybody tell me what I'm doing wrong?
Edit: the code of the widget only works on the domain that I gave launchrock, I'd like to experiment with a .html on my PC with the javascript code in it but the launchrock widget doesn't load at all.
Looking at this in Chrome developer there is an inner shell that can also be customized and added in your master css so overwrite their classes and added to your Master CSS.
EX:
.LR-content {
color: #FFFFFF;
font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 14px;
font-weight: 300;
height: 200px;
min-height: 100%;
position: absolute;
width: 500px;
z-index: 0;
}
.LR-bg-img {
background-attachment: fixed;
background-color: #222222;
background-image: url("img/classicBg.png");
background-position: center center;
background-size: cover;
content: "";
height: 50%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
I was just testing those and you can see the many changes. So you can try grabing those codes and overwrite them on your master.
Related
I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq
As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code snippet to be the following:
<style>
body {
position: fixed;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.mask {
position: absolute;
z-index: 2;
background: white;
height: 100vh;
width: 100vw;
mix-blend-mode: screen;
/* display: none; */
}
svg {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
I copied the HTML code into a code block embed on my page, the CSS into the inside head tag on page settings & the JS into the before body tag on page settings. When I publish my site, the 'CREATIVE' text displays, but without the interactive fluid element. I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered (changing the body background to white, as opposed to transparent; adding the code as a code block rather than the Inside tag, but nothing has as yet made it work. I’d really appreciate any help.
My Webflow site read-only can be found here: https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview
.container {
background-color: red;
}
.container img {
mix-blend-mode: darken;
}
this is how it works the container should have background-color to mix the background color in child image
Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Reference : https://www.w3schools.com/cssref/pr_mix-blend-mode.asp
I need to reproduce a similar effect of this: https://dribbble.com/shots/3275340-Exploring-The-North-Face in the home page of the website i am working on. I read some comments in this dribble link, and the creator said that the effect was made with Adobe After Effects, so maybe this effect is not completely doable in the web environment.
(Old) Currently the way-to-go is a custom svg path set to display only the content inside of it, like this question: SVG viewbox overflow: hidden / crop.
My first goal was resolving how to make the transition between the two words not linear, so i created an outline of the clouds with svg path. My problem with this code here it's that as soon as i leave my developement resolution (approximately 1900x920) of my monitor the svg path doesn't resize and gets pushed after the end of the image.
My problems right now are 2:
Resolved Notice the transition over the two words, how it's not linear
Resolved he responsiveness of this whole section, how it breaks just moving like 10px away from my screen's resolution
Old Fiddle: https://jsfiddle.net/4kd36ya8/1/
UPDATE: I changed the whole code to try out another thing: CSS Masks (https://css-tricks.com/clipping-masking-css/) and this seems to work very good with what I am trying to achieve. The problem is with the position of the words. If i put them in position: fixed there is a bug in Microsoft Edge (see this question for reference; note that I already tried the fix that the post explains, but with no success at all).
Current Fiddle: https://jsfiddle.net/ztgyq1kc/4/
Current Code:
body {
/* Just to make the document scroll over */
height: 300vh;
}
.home-header {
height: 100vh;
}
.home-header .inside {
position: relative;
width: 100%;
height: 100%;
-webkit-mask-image: url("https://i.postimg.cc/SN3Wjsx3/test.png");
mask-image: url("https://i.postimg.cc/SN3Wjsx3/test.png");
z-index: 2;
}
.image {
width: 100%;
height: auto;
display: inline-block;
}
.cloud-writing {
height: 0;
line-height: 0;
text-transform: uppercase;
font-weight: 700;
font-size: 12.5rem;
letter-spacing: -1rem;
text-align: center;
position: fixed;
top: 50%;
width: 100%;
}
.cloud-writing.white {
color: #fff;
z-index: 3;
}
.cloud-writing.blue {
color: blue;
z-index: 1;
}
<div class="home-header">
<div class="inside">
<div class="cloud-writing white">Text1</div>
<img src="https://via.placeholder.com/1920x1080?text=placeholder" class="image" alt="" />
</div>
<div class="cloud-writing blue">Text2</div>
</div>
My next goal will be adding a parallax library (I still do not know which one) to handle all animations.
I ask my question as someone who knows pretty much nothing (nothing at all) about coding. I am clearly very confused about how HTML, CSS, and JS interact.
I am creating a Squarespace website, and I found an FAQ form from Codepen.io that I would like to include on a specific page of the website. I want to know how to approach inserting the HTML, CSS, and JS into a Squarespace code block.
I am able to copy and paste the HTML part of the code into the Squarespace code block feature and the FAQ form shows up, but without all the colors/fonts/styles that the CSS and JS code apparently bring to it. That is about all I got to "work." Below I provided a link to the code I am referring to. I hope this is all making sense.
FAQ form in question: codepen.io/sarenz/pen/azGLRg
*I have added the CSS and JS codes for context
CSS:
{ /basic reset/
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* background: red; */
background: lightgray;
}
.faq-wrapper{
border-bottom: 1px solid rgba(0,0,0,0.5);
font-family: 'Lato';
line-height: 1.6;
padding: 40px 40px 17px 75px;
position: relative;
}
i {
display: block;
height: 50px;
width: 50px;
}
a{
cursor: pointer;
display: block;
height: 40px;
margin-right: 0;
position: absolute;
right: 75px;
top: 30px;
width: 40px;
}
a.hide-button{
z-index: -1;
}
p.faq__question, p.faq__answer{
margin-left: 30px;
margin-right: 100px;
max-width: 650px;
}
p.faq__question{
font-weight: 700;
padding-bottom: 20px;
}
.hidden-part {
height: 0;
}
.hidden-part *{
opacity: 0;
}
.faq__question:before, .faq__answer:before{
color: #3376b3;
font-weight: 900;
margin-left: -30px;
position: absolute;
}
.faq__question:before{
content: 'Q:';
}
.faq__answer:before{
content: 'A:';
}
JS:
$( function(){
'use strict';
var $showButton = $('.faq-wrapper .expand-button'),
$hideButton = $('.faq-wrapper .hide-button');
$showButton.click(function(){
var id = $(this).attr('data-id');
var height = $('.hidden-part[data-id="'+id+'"] >.faq__answer').height();
height = height+25;/Adds extra padding to the bottom/
$(this).velocity({opacity:0})
.css('z-index',1)
.next('.hide-button')
.velocity({opacity:1})
.css('z-index',2)
.next('.hidden-part')
.velocity({height:height});
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:1},{duration:400});
});
$hideButton.click(function(){
var id = $(this).attr('data-id');
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:0},{duration:200});
$(this).velocity({opacity:0})
.css('z-index',1)
.prev('.expand-button')
.velocity({opacity:1})
.css('z-index',2)
.next()
.next()
.velocity({height:0});
});
} );
Congrats on getting started in the coding world! Squarespace has a tutorial on adding custom HTML, CSS, and JS to your website: link
As far as understanding how HTML, CSS, and JS interact, there are plenty of tools available to help you learn depending on your preferred learning style: Google Results
Here's the basic run-down:
HTML: The content that you want on your website
CSS: The formatting of that content
JS: Logic to change the content and formatting based on conditions or events (ie user clicks a button)
I'm creating a web-based tutorial, with modules that have multiple pages. I have the page number (xx of yy, e.g. "01 / 12") at the bottom of each page, using an html div and css. I have a java wrapper, but can't figure out how to get a page number to display, without having to manually update every html file. The course is structured as "..\L01_CourseOrientation\p01.html", "..|L01_CourseOrientation\p02.html", etc. Each module has a different number of html files/pages in it, so I want to create a universal java script function that will allow me to display what page I'm currently on out of however many pages are in the module. This will make it easier for when I have to add or remove pages, I don't have to manually update dozens of pages.
Html:
<html>
<body>
<div id="text_area">Course information here</div>
<div id="pgnbr">01 / 10</div>
</body>
</html>
css:
#text_area {
background: url(557logo1.png) no-repeat center;
position: absolute;
font-family: Arial, sans-serif;
width: 936px;
height: 556px;
left: 44px;
top: 107px;
z-index: 7;
font-size: 18px;
color: #FFFFFF;
}
#pgnbr {
position: absolute;
font: Arial, sans-serif;
color: #FFF;
text-align: right;
padding-top: 1px;
width: 75px;
z-index: 5;
left: 890px;
top: 695px;
}
use window.location.href to get the current url
then parse the url
function ParseUrl(PageURL)
{
PageURL.lastIndexOf("\");
.....
...
return PAGENUMBER;
}
then update the page number
document.getElementById("pgnbr").innerHTML =ParseUrl(PageURL);
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE