How to create auto popup when I access a website - javascript

I was trying to create an auto popup when I access a web store that is developed in Shopif
<SCRIPT TYPE="text/javascript">
function popup(mylink, windowname) {
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string') href=mylink;
else href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
</SCRIPT>
<BODY onLoad="popup('autopopup.html', 'ad')">
I have the above code for Popup Windows Opening Automatically. However, I need assistance on how to make this work on and this is the website that I am trying to work it on https://petit-tapis.co.uk
Thank you in Advance

As #Scopey said, modern browsers prevent this behavior from auto occurring. You can however add a click or if you want people to take action first before doing anything else, you can for example add an overlay that blocks any other functionality (but I can tell you that this kills user experience).
Maybe say more what your goal is. Why do you want this extra window to open? What benefit is there in doing this (what do you and what does the user get out of it)?
edit: See my comment below. I also slapped together a very simple version of what I am talking about: https://jsfiddle.net/uthhvu8d/
HTML:
<div class="wrapper">
<div class="overlay">
<form action="">
<input type="text">
<input type="text">
<button>Submit</button>
</form>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, inventore esse aliquam nostrum? Cupiditate provident, delectus, minus voluptatum natus fugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus temporibus vitae quibusdam maxime natus fugiat quis amet sed perferendis quod.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nostrum consequatur animi quod rem eos nihil obcaecati repellat. At, accusamus.</p>
</div>
CSS:
.wrapper {
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
display: none;
}
JS:
function showOverlay() {
$('.overlay').show()
}
setTimeout(showOverlay, 2000)

Thankfully, modern browsers prevent this behaviour from happening.
Any window.open must occur only as a direct result of a user triggered event - such as a mouse click or similar.

As #Scopey said browsers stop you opening a pop up window however you could use the HTML5 Dialog and the dialog overlays in the browser have a play you can even open it model if you wanted will take a little longer to get it to work but it's anotion for you
<dialog id="dialog">
<iframe src="autopopup.html" />
</dialog>

Related

Spacing between long amount of text lines css/html/js

Let's say that i have lots of text that i dont want to be in one single huge line, how could i put some white spacings after a certain amount of words? And should i do this in the CSS file or somewhere else?
So for example: this: "You have succesfully looted the house, as the house was empty you didnt run into any trouble." to: "You have succesfully looted the house, as the house was empty you
didnt run into any trouble."
Might not look as great on this site but i think you will get the idea. The string is empty at first and will be filled by some action that happens on the page.
Specify a width on the container where your text is inside. It is better to use the max-width property since your text may be smaller than the maximal width you want. In this case it is not essential though, since the paragraph is a block element and is full width.
p {
border: 1px solid lightcoral;
}
.ch-wrap {
max-width: 60ch;
}
.px-wrap {
max-width: 200px;
}
<h1>This has no width set</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
<h1>This has a width of 60 characters</h1>
<p class="ch-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
<h1>This has a width of 200px set</h1>
<p class="px-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
You can use <br> tag to write in a new line. If you want to put white spaces you have to move the text via CSS. For example:
HTML:
<font id="moving">Some text</font>
CSS: #moving { float: right; }
but if it not works you can try with:
#moving { position: absolute !important; float: right; }
The !important attribute makes sure that the position tag will be set on absolute.

Rotate Arrow on Accordion Click

How do I get this arrow rotating when the parent accordion div is clicked? Any help would be wonderful. The idea is that as you click the accordion the arrow which is an svg file should rotate, however I can't seem to get it working
HTML
<button class="accordion">Design <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste veritatis maiores doloribus ex, culpa tenetur?</p></div>
<button class="accordion">Development <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At rerum a voluptate nesciunt! Quam, inventore.></div>
<button class="accordion">Search Engine Optimisation <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, blanditiis. Corporis maxime eum nemo delectus.</p></div>
<button class="accordion">Progressive Web Apps <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa consequuntur obcaecati iste odit vero mollitia.</p></div>
CSS
#services .accordion{
font-size:1rem;
background-color:rgba(245, 246, 250,0.4);
cursor:pointer;
padding:18px;
width:100%;
border:none;
outline:none;
display:flex;
justify-content:space-between;
width:68vw;
text-align:right;
}
#services .active, .accordion:hover{
background-color:rgba(245, 246, 250,0.4);
color:rgba(0, 151, 230,1.0);
}
#services .panel{
background-color:rgba(245, 246, 250,0.4);
display:none;
width:100%;
justify-content:center;
text-align:center;
}
#services .caret{
width:12px;
}
JS
/*accordion*/
var acc = document.getElementsByClassName("accordion");
var arrow = document.getElementsByClassName("caret")
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "flex") {
panel.style.display = "none";
} else {
panel.style.display = "flex";
}
arrow.setAttribute("transform", "rotate(-45deg)");
});
}
This currently throws an error at arrow.setAttribute, because arrow is not set at this point. And setAttribute is not a proper way to set inline styles.
Both can be fixed easily like this:
this.querySelector('.caret').style.transform = "rotate(-45deg)";
querySelector returns the first element with that class it finds, and by calling it on this, which refers to the button, we can automatically limit it to the correct scope. And then the inline style is set using an appropriate syntax.
(var arrow = document.getElementsByClassName("caret") can then be completely removed, you don’t need it for anything else.)
If you want the arrow to rotate back, when the element is collapsed again - then don’t place this line at the end, but in both the if and the else block. Once with rotate(-45deg), and once with rotate(0) to set it back to normal (or whatever value you need for that state.)

How to blur the whole page except the text field I just clicked?

I have a text field top of my website. Now when someone focus on that text field, except that text field everything else available on body will be blur. How to do that? Thanks.
This is easy with jquery:
$(document).ready(function(){
$('#mytext').focus(function(){
$('body').find('*').not('#mytext').addClass('blur');
});
$('#mytext').blur(function(){
$('body').find('*').not('#mytext').removeClass('blur');
});
});
li{
background: red;
}
.blur {
filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="mytext">
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quaerat fugiat culpa animi voluptas at explicabo labore consectetur dignissimos tempora. Libero praesentium quibusdam tempora molestiae nesciunt, unde, molestias quam? Commodi.</p>
CSS does offer a filter: blur(...) option, but it's experimental and subject to change. Here's a blog post with example.
Note that once a parent element is blurred, a child element can't be un-blurred. So you'd have to apply the blur class to all of the elements that don't include your text box as a child. This could be tricky to get right.
A more common option on the web is to put a darkened overlay, for example a full-page element with background-color: rgba(42,42,42,0.7); on top of your page, and use z-index or similar to get your input element to pop on top of that. This is generally simpler and more widely-supported than selective blurring.

Making a webapp, I need a loading div in between pages

I'm looking everywhere, but I cant find how to do it!
I have a webapp, and one page is very heavy with data and it takes a long time to load. Is it possible to make a loading div appear when its loading the next page? Maybe like this;
Make a loading div, set style to visiblilty: hidden
When a user click a link, the div is set to visibilty: visible
Starts loading the data of the next page
When data loads, the page is shown.
Like I said, this is just a basic version of what you are looking for.
http://jsfiddle.net/sheriffderek/CbF9M/
HTML (just some stuff)
<img src="http://placehold.it/500x500" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem amet earum sapiente aspernatur optio aliquid officia veritatis quaerat eaque ex fugiat maiores iure! Fugit deserunt enim cumque eum veniam eius.</p>
<div class="cover"></div>
CSS
.cover {
position: fixed;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
background-color: red;
}
jQuery
$(window).ready( function() {
$(".cover").delay(3000).fadeOut();
});
So, when the window is loaded... fade out the covering div... but really - you would want to be much more specific about what is loaded. The delay is just for effect, because we don't have any real data being transferred.

How to fit the container based on screen size html

I have started designing a template for my webpage using html and for first time.
I have used divs inside the body tag.Everything looks fine when the screen is maximized.
But if i minimize the screen, the alignment looks very odd.How can i design the webpage so that it fits the screen all the time.Here is my sample code.
<body height="100%">
<table width="100%" style="border-spacing: 0;">
<tr>
<td></td>
</tr>
</table>
<div>
<div style="float: left; position:relative;width:700px;height:75px;border:2px solid black;">
</div>
<div style="float: right; width:530px;height:260px;border:2px solid black;">
</div>
<div id="calendartable" style="float:right;position:relative;width:530px;height:30px;border:2px solid black;"></div>
</body>
You are talking something called responsive design Check this
It's very hard to understand what you actually want to accomplish.
First of all, only use for real tables, such as a timetable, or something you would use Exel for. We don't use tables in modern webdesign anymore. Really. :)
Secondly, you should try to come up with an idea of how your site should look like. Before you do any code at all.
A very simple site with "responsive" design:
<body>
<div id="main">
<header>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</nav>
</header>
<div id="content" class="content">
<h1>My page title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit eligendi non quaerat tempora totam similique aliquid quas architecto rem ratione iure recusandae. Sit incidunt sint amet maxime necessitatibus expedita aspernatur?</p>
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam cupiditate similique nostrum impedit nulla doloremque assumenda quis provident ducimus nihil iusto veniam voluptatibus distinctio aperiam et vel quae ex libero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti repellendus quibusdam praesentium cum facilis laboriosam numquam dolor atque cupiditate ullam quasi optio? Ratione maxime quam dolores sint dicta rerum.</p>
</div>
<footer class="footer">
<p>© 2014 – My Fancy Pagename.</p>
<p>Please do copysteal. You're free to use whatever you like from this page as long as you attribute me and link back.</p>
</footer>
</div>
(http://jsfiddle.net/n3gn5/)
As you can see here, I am not using any inline-CSS (that style="color:red;" stuff), but I have the CSS in an extra file:
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
nav ul li {
list-style: none;
display: inline;
}
nav ul li a {
text-decoration: none;
color: gray;
margin-right: 10px;
}
h1 {
font-size: 80px;
font-weight: 100;
color: orange;
}
footer {
font-size: 12px;
color: gray;
font-weight: 100;
}
#main {
width: 70%;
margin: auto;
}
With the jsfiddle link, you can mess around and see the result if you like.
I would really recommend to get some help with HTML, CSS and JavaScript. Codecademy does some really nice and free courses. On the other hand there are quite some good books out there. Just make sure with books or articles online: Pick some that are not older than a few years. If you pick up a book or tutorial from 1997, you'll learn wrong stuff, you'll learn bad habits and behavior. It will possibly work (table-layouts), but you won't have any fun with it, nor be able to create good websites with that knowledge.
If you're done there and have special questions, come back and ask them.
Your question feels a little like "How do I build a car? I have no idea!". There is no good answer to that kind of questions.
I hope I could help anyway. :)
you can use bootstrap to develop a responsive web page.
Else, you need to understand the rules about the responsive design. try to follow one of this example and understand how to use MediaQueries ;)
http://www.hongkiat.com/blog/responsive-web-tutorials/

Categories

Resources