SimpleModal content only appears on page resize - javascript

I'm using simplemodal to pop up a modal on my page. I'm hiding the modal content on page load with display:none. I have the simplemodal-container styled properly, and that pops up fine. The content that's supposed to be in the container, though, remains undisplayed; unless I resize the page. When I do resize it, the content appears just as I want it to.
How do I get the content to appear properly without resizing the page?
Here is roughly what my code looks like, in a phtml file:
<div id="div_for_simplemodal" style="display:none"></div>
<script type="text/javascript">
*script that generates content*
</script>
Then, in a separate JS file:
$("#div_for_simplemodal").modal({overlayClose:true});
And the CSS:
#simplemodal-container {
height: 600px;
width: 1200px;
color: #bbb;
background-color: #333;
border: 4px solid #444;
padding: 12px; }
Again, the simplemodal-container appears fine, but without the content that my javascript is supposed to generate. The content appears on the page and in the container without "display:none" added to "div_for_simplemodal", and appears in the container after I resize the page.

You have used the selector $("#div_for_simple_modal") which doesn't match the ID of the element.
Use $('#div_for_simplemodal');

Related

embedded javascript alert message not showing in google sites personal webpage

I embedded below code into my google sites page. for some reason the alert window is not popping up.
<form xmlns="myform">
<input id="HelloWorld" onClick="alert('Hi')" type="button" value="HelloWorld"/>
</form>
I tried the code in W3school code editor site and its works. Pictures attached.
google actively blocks stuff like popups in JS and maybe some HMTL implementations. I found a post here and k8oms mentioned his CSS and HTML version works. Check out their write up for a solution k80ms blog post.
2: https://www.k8oms.net/document/popup
My apologies on the late edit.
Use JS to getElelementByID and select a visible/hidden element on myPopup to "show / hide" your window.
popupWindow.js
// When the user clicks, open the popup
function popupFunction() {
// get the HTML element "myPopup" which is defined in your span element
let popup = document.getElementById("myPopup");
// toggle visibile
popup.classList.toggle("show");
}
Next you need to style your window with CSS something very basic would be.
style.css
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
}
Then we can create an onclick to call popupFunction() from your HTML page.
id="myPopup" is the important thing here, this is where JS's getElementById attaches itself to.
<button onclick="popupFunction()">clickMyButton
<div class="popup">
<span class="popuptext" id="myPopup">
Here is your "alert box" 🫤 not perfect. <br>
But you can place this span anywhere you'd like, including pop over all content like an alert box.. Just need to create a box template for "alerts".</span>
</div>
</button>
This is a very basic way to create an "alert" style popup window. If you were to define a stylized box with CSS that looks like a modern alert box you can call the <span class="popuptext" id="myPopup"> anywhere in your HTML to create a popup window. Areas such as a header or upper banner area would be a good place to add this span so it would display in the same spot "top & center" just as an alert box would.
I have a slightly styled answer over on my GitHub as I worked towards a solution, with a href link as a makeshift close button.

PDF Type view using html and css. Page overflow problem

I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page

Affect iFrame CSS from within content in SharePoint Online

I'm generating a modal form with the following standard code:
function openMyForm() {
SP.UI.ModalDialog.showModalDialog({
url: currentSite + "/SiteAssets/myForm.aspx"
title: "My Form",
allowMaximize: false,
showClose: true,
width: 1000,
height: 600
});
}
There's a problem with the CSS however - the close button position is off:
The issue can be traced to the following CSS:
.ms-dlgTitleBtns {
margin-top: -10px;
margin-right: -18px;
height: 30px;
float: right;
}
Specifically margin-right should be 0px.
myForm.aspx is in an iFrame generated by SharePoint, which includes the above CSS. How can I change that value or otherwise get that close button in the right place. I.e.:
I've tried adding
.ms-dlgTitleBtns {
margin-right: 0px !important;
}
and
$(function() {
$(".ms-dlgTitleBtns").css("margin-right","0");
});
to myForm.aspx but of course there's no effect due to the iFrame.
The problematic element with the class ms-dlgTitleBtns is located on the hosting page, rather than on the form itself; putting your custom script/CSS on the same page saves you from having to modify content on a different page through an iframe.
You can add your JavaScript/CSS to the page from which the dialog box is being opened instead of adding it to the form itself.
(Just make sure you properly refresh your app.js file after implementing the change.)
If the iframe is served from the same site as the outer page, you can access it with:
$('#iframeId').contents()
Thriggle is correct, the dialog framing comes from the hosting sharepoint page, not your form. You can tweak the styling using a script editor on the host page.

jQuery fadeIn making page scroll to top / jump

jQuery is destroying me this week. I'm using fadeIn via jQuery on my portfolio site (http://www.codeisdna.com) to open up a section once it's clicked. Here's the HTML code I'm using:
<div class="project first project_name">
<div class="title">
Project Title!
<div class="date">2012</div>
</div>
<a class="expand" title="Click to expand the project." href="#project_1">Project Title!</a>
</div>
Which opens up a tab:
<div id="project_1" class="project_full pname"></div>
Using this js:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
});
EDIT: Here is the CSS code for .project_full (the expanded tab -- the CSS code for .project is irrelevant):
.project_full {
display: none;
margin-top: 20px;
width: 100%;
max-height: 450px;
padding: 20px 0px;
text-align: center;
background: url(../img/code.jpg) top center no-repeat fixed #293134;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
color: #fff;
overflow: hidden;}
.project_full .wrapper {position: relative;}
I've tried assigning a fixed height to a parent div, e.PreventDefault() doesn't work (I'm using anchor based tabs, so nothing of that sort will work), and so on. The page jumps on the first click and with each successive click. I know it jumps due to the missing content once the div is unhidden and "rehidden."
I'm wondering if HTML5 data attributes would remedy this? But then again, why would it as the anchor would still exist, albeit it being blank (#).
Hopefully someone with a lot more JS experience can help me!
Either change your handler adding preventDefault
$(".project").click(function(e) {
e.preventDefault();
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
Or change your a tag href attribute to be something like 'javascript:'
Or replace a tag with say span and let your click handler remain unchanged.
Or add name attribute to a tag (<a name='project_1'></a>) in right place as it is scrolling to this tag or beginning of the page as there is no ancor with corresponding name

jQuery hide() targeting <p> element hides background of entire parent div

I have a simple blog page - a list of posts that each consist of a title and contents. When the page loads I want all posts' contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect - the on-page-load hide() function that hides each post's content also hides the background of the containing (id="content") div:
Relevant JavaScripts:
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Summary of blog page:
<section class="grid_7">
<div id="content">
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
</section>
Relevant CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('../images/content_background.jpg');
}
When the page loads the list of titles displays without the #content parent div's background. However when I click on a post's title the #content div's background shows up behind all posts up to and including that one.
Any idea what's going on?
It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:
.blog_post { float: left; }
In that case, the reason that the background doesn't show up is that the height of the content div is zero. A floating element doesn't affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it's visible.
Add an overflow to the content div, that will make it contain its children:
#content { overflow: hidden; }
Note that this will not hide anything as long as you don't specify a size for the content element, it will just change how it's rendered so that it will become a container for its children.
A bit of a stab in the dark: Your #content div will, of course, be a lot shorter as the blog posts aren't there, basically consisting just of the divs with the titles. Perhaps that's the problem.
Does the image have a blank (or subtle) bit at the top or something, so that it's only apparent that it's there when there's more content in the #content div (e.g., when it's taller)? Or is there some other reason you can see that when #content is really short, you wouldn't see the background on the part of it that's there? (You can use the debugging tools in most modern browsers to see what the dimensions of the #content div are when the paragraphs are hidden; or slap a border on it temporarily, but tools these days are pretty good.)
Basically, since the jQuery doesn't, of course, actually hide the background, it must be a side-effect of the paragraphs being hidden — because of the effect that has on the dimensions of the #content div.
This is working fine for me:
HTML:
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg');
}
JS
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Check it live here: Jsfiddle example

Categories

Resources