I have embedded a simple google map with the stores I needed located on them. I would like to add a search box just above the map in the center or in the map at the top as per the places search box. Really not sure on whats the best method of this as my html is very limited.
this is my map code
<section class="mbr-section mbr-section__container" style="background-color: rgb(255, 255, 255); padding-top: 80px; padding-bottom: 80px;">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="mbr-map"><iframe frameborder="0" style="border:0" src="https://www.google.com/maps/d/u/0/embed?mid=1Dt00Nkp6QbZ3DqYkrR7NCjTSQyo"></iframe></div>
</div>
</div>
</div>
Related
I've followed the steps at this link to setup a custom signin page for Azure AD B2C:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-user-flow
Which are essentially:
Create a custom HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Product Brand Name</title>
</head>
<body>
<div id="api"></div>
</body>
</html>
Upload it to a file hosting service
In Azure AD B2C > User Flows > [ your_sign_in_flow ], set the following:
Use custom page content: YES
Custom page URI: [ paste the URL of your hosted file here ]
Click Save
Click Run User Flow to test the flow
That produces this login page:
Where the HTML of the api div is:
<div id="api" data-name="Unified">
<div class="heading">
<h1 role="heading">Sign in</h1>
</div>
<div class="claims-provider-list-buttons social" aria-label="Sign in with your social account" role="form">
<div class="intro">
<h2 aria-level="1">Sign in with your social account</h2>
</div>
<div class="options">
<div>
<button class="accountButton firstButton claims-provider-selection" id="AzureADPeople" role="link" autofocus="">Azure AD People</button>
</div>
</div>
</div>
<div class="divider">
<h2>OR</h2>
</div>
<form id="localAccountForm" action="JavaScript:void(0);" class="localAccount" aria-label="Sign in with your email address">
<div class="intro">
<h2 aria-level="1">
Sign in with your email address
</h2>
</div>
<div class="error pageLevel" aria-hidden="true" role="alert" style="display: none;">
<p></p>
</div>
<div class="entry">
<div class="entry-item">
<label for="email">
Email Address
</label>
<div class="error itemLevel" aria-hidden="true" role="alert" style="display: none;">
<p></p>
</div>
<input type="email" id="email" name="Email Address" title="Please enter a valid Email Address" pattern="^[a-zA-Z0-9!#$%&'+^_`{}~-]+(?:\.[a-zA-Z0-9!#$%&'+^_`{}~-]+)*#(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$" autofocus="" placeholder="Email Address" aria-label="Email Address">
</div>
<div class="entry-item">
<div class="password-label">
<label for="password">Password</label>
<u><a id="forgotPassword" href="/<my-tenant-name>.onmicrosoft.com/B2C_1_signin1/api/CombinedSigninAndSignup/forgotPassword?csrf_token=****==&tx=StateProperties=****&p=B2C_1_signin1">Forgot your password?</a></u>
</div>
<div class="error itemLevel" aria-hidden="true" style="display: none;">
<p role="alert"></p>
</div>
<input type="password" id="password" name="Password" placeholder="Password" aria-label="Password" autocomplete="current-password" aria-required="true">
</div>
<div class="working"></div>
<div class="buttons">
<button id="next" type="submit" form="localAccountForm">Sign in</button>
</div>
</div>
</form>
</div>
In order to be able to customise this page, I need to know how to do the following:
Remove text elements if I don't want them displayed
Modify text elements if I want to change the text strings
Style text elements if I want them to have different font stylings
Wrap various elements in divs with particular classes to be able to apply a design
(eg display the different sign in options as inline-blocks side by side etc)
My question is:
Is it permissible to do all of this via JavaScript (and CSS to hide/style text elements)?
Technically I think I could do it, but I'm not sure if it is allowed or best practice.
This page has a list of guidelines for using JavaScript in Azure AD B2C custom pages:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-and-page-layout?pivots=b2c-user-flow#guidelines-for-using-javascript
One of them is:
Don't take a dependency on Azure AD B2C code or comments.
But I'm not sure how elements can be customised without being able to reference the code within the api div.
For reference, the Page Layouts page does have a Version setting, which makes me think that, if we keep the same version selected, the contents of the api div would be unlikely to change (and therefore not break any JavaScript referencing particular divs etc).
Proof of Concept
I was able to create this custom signin page:
With this custom HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My Custom Login Page</title>
<!-- links to CSS framework -->
<script src="https://cdn.jsdelivr.net/npm/uikit#3.15.19/dist/js/uikit.min.js" integrity="sha256-gHEvLzvpjU93VFTgu5myAgmc+0I1CzBzYe0YhTJ8uqI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit#3.15.19/dist/js/uikit-icons.min.js" integrity="sha256-PxrcCuBlFkPVlPsGxNzt59W3EKYOH79z+v/tq9uFS2M=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit#3.15.19/dist/css/uikit.min.css" integrity="sha256-f3SVFXP30MgahZ0Z7Lp1W02MuLgtiAtk8uFqTbGxNfY=" crossorigin="anonymous">
<!-- links to google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#200&family=Noto+Sans+Ethiopic:wght#300&display=swap" rel="stylesheet">
<!-- CSS styles -->
<style>
#api {
width: 300px;
padding: 25px 40px 40px 40px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 50px;
}
.heading {
text-align: center;
}
h1 {
font-family: 'Josefin Sans';
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 45px;
margin-bottom: 0px;
}
.tagline {
margin: -5px 0px 25px 0px;
padding: 0px;
display: block;
font-size: 14px;
color: #727272;
}
h2 {
font-size: 14px;
line-height: 12px !important;
margin-bottom: 10px;
}
.social {
margin-top: 30px;
}
#forgotPassword {
font-size: 14px;
margin-left: 5px;
text-transform: lowercase;
}
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
border-color: #e5e5e5 !important;
}
</style>
<!-- jQuery to get things looking the way I want -->
<script>
$(document).ready(function() {
console.log("document is ready apparently");
// hacky - put in a delay of 1 second to wait for the 'api' div content to be added
setTimeout(() => {
console.log("Delayed for 1 second.");
$(".heading h1").text("APP");
$( "<span class='tagline'>Tagline Goes Here</span>").insertAfter( ".heading h1" );
$("#localAccountForm .intro h2").text("External Users");
$(".social h2").text("Internal Users");
$("label[for='email'], label[for='password']").remove();
$("input").addClass("uk-input");
$("#email").addClass("uk-margin-small-bottom");
$("button").addClass("uk-button uk-button-default uk-button-small uk-margin-small-top");
$("#AzureADPeople").text("Single Sign-On");
$('.divider').remove();
$('.social').insertAfter('#localAccountForm');
$('.password-label').insertAfter('#password');
}, "1000");
});
</script>
</head>
<body>
<!-- this is the only thing required for a custom page -->
<div id="api"></div>
</body>
</html>
Don't take a dependency on Azure AD B2C code or comments.
This moreso is referring to our JS hooks and low level functionality, not the DOM.
You’ll need CSS/JS to manipulate the DOM for your requirements.
Hi I am showing items from library to the main page using Content Query. TO scroll this items i am using Marquee now i want to stop when OnMouseOver and again start on out i use onmouseover="stop()" onmouseout="start()" and button to stop but its not working please is the code i have. Can anyone help how use or is there any option. Thank you.
<marquee id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
<style>
#WebPartWPQ2 a {
color:#000000 !important;
}
</style></div></marquee>
Looks like, if I understand you correctly, you would like to add a MouseOver and MouseOut effect to a marquee. If that is correct. all you needed to do is tell the browser that you wanted THIS marquee and it would have worked. your code right now does not say which marquee you want the JavaScript to work towards.
syntax = some-event="(What)*Target****.*(Which)action();"
this.stop(); or this.start
onMouseOver="this.stop();"
Hope this is what you were looking for. If not could you rephrase your
question. I had a hard time understanding you.
<style>
#WebPartWPQ2 a {
color: #000000 !important;
}
</style>
<marquee onmouseover="this.stop();" onmouseout="this.start();" id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
</div>
</marquee>
I'm trying to align four pictures with their captions in a square grid.
I'm using the following HTML code:
<div class="grid">
<div class="post-block">
<img src="img1.jpg" />
<div class="caption">caption1</div>
</div>
<div class="post-block">
<img src="img2.jpg" />
<div class="caption">caption2</div>
</div>
<div class="post-block">
<img src="img3.jpg" />
<div class="caption">caption3</div>
</div>
<div class="post-block">
<img src="img4.jpg" />
<div class="caption">caption4</div>
</div>
</div>
and the following CSS code:
.post-block {
display: inline-block;
position: relative;
text-align: center;
}
If images and captions are the same size everything is ok, but when they are different I get this (an example):
I've tried to align images and captions of different sizes using CSS with no success. I need something like this:
Any help would be appreciated.
Thanks in advance
You'll need to use separate block elements at the same DOM level for the image and the caption to achieve what you've shown in the "RIGHT" image. Right now your caption DIV is nested inside the image DIV, and that's gonna do what you've shown. The caption DIV needs to be outside the image DIV.
You will probably want two separate div wrappers around each 2 photos..
Then align images vertically to bottom.
Vertical align images to bottom
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
then set the styling via inline or your css file
<div style="vertical-align:bottom;">
or
.myWrapClass{
vertical-align:bottom;
}
check out this site... Use the css properties there to keep it responsive
Example
if i have:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
Thanks for your support
If i understand your question correctly, I believe you want this:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
#media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
The effect you are seeing is because of the container’s padding.
You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.
To remove the padding, add p-0 to the container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.
I have a site with a right sidebar and a left main content area. Code looks like this:
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
with
.leftside
{
float:left;
width:710px;
}
.rightside
{
margin-left:720px;
}
(see actual site at http://blog.stephenkiers.com/)
Reason it is coded this way is so that because the leftsidecontent is important and I want to be first data accessed by visually impaired visitors; instead of them having to skip all the fluff every time!
The code works in FF, IE8, Safari etc; but in IE7 the rightside divs clear the floated divs.
I would love any suggestions you may have. I have some ideas about how to fix it; but they all involve pretty big rewrites.
thanks!
why don't you try wrapping the content stuff into two columns like this example
The CSS:
.leftside {
float:left;
width:710px;
}
.rightside {
float: left;
margin-left: 20px;
}
.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; }
The HTML:
<div class="leftside">
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
</div>
<div class="rightside">
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
</div>
This way the leftside and rightside are just layout elements and are isolated from the content.
Another good tip for visually impaired visitors is to have links at the top of the page to allow users to skip directly to content sections and hide them from your layout with css:
.skipToLinks { position: absolute; top: -100px;}