Having trouble adding lightbox feature to responsive menu item

[kineticcreative123]

Hi Everyone,

I'm having trouble figuring out how to add a lightbox feature to a mobile menu. I have the lightbox built and working on its own but can't figure how to incorporate it into my responsive menu without breaking everything. I'm not looking for anything fancy. Just a lightbox feature that can open a url.

This is my menu:

untitled document

This is my lightbox:

http://offers.premierinc.com/header_lightbox.html

[Nancy OShea]

I'm not sure what your goal is.   The shortest distance between 2 points is a straight line:  click menu,  open URL.  No Lightbox required.

Nancy

[kineticcreative123]

I need a lightbox to get around pop up block. basically it's acting like a table of contents for an ebook/website. I don't want it to be a pop up window.

[osgood_]

What, you want the modal window to appear on page load, no pop up link?

Then just alter the script to as below:

<script>

$(document).ready(function() {

$('.lightbox-content').html("<div class='close'>&times;</div><iframe width='100%' height='390' src='http://www.premierinc.com' frameborder='0' allowFullScreen></iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();

$('.close, #page-overlay').css('cursor','pointer').click(function() {

$('#page-overlay, #lightbox-wrapper').fadeOut();

});

});

</script>

[osgood_]

You already have a part lightbox on your page - remember we created for your other project?

Delete the below script at the foot of the page:

<script>

$(document).ready(function() {
$('#page-overlay, #lightbox-wrapper').hide();
$('.show_video').click(function(){
$('.view_video').html("<iframe width='640' height='390' src='https://www.youtube.com/embed/KizaRwJxEy0' frameborder='0' allowFullScreen>" + "</iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();
});
$('.close-lightbox, #page-overlay').css('cursor','pointer').click(function() {
$('.view_video').html('');
$('#page-overlay, #lightbox-wrapper').fadeOut();
});
});
</script>

Then replace it with the code below (you can move the css to an external link or to the top of the page) I'm not really sure what all that other rubbish is in your page?

<style>

#page-overlay{

position: fixed;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.8);

}

#lightbox-wrapper {

height: 100%;

width: 75%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

#lightbox-wrapper {

width: 80%;

}

}

@media screen and (max-width: 480px) {

#lightbox-wrapper {

width: 95%;

}

}

#lightbox-wrapper .lightbox-content {

position: relative;

top: 50%;

transform: translateY(-50%);

background-color: #fff;

text-align: center;

}

.close {

position: absolute;

right: 0;

top: -60px;

font-size: 40px;

color: #fff;

}

</style>

<script>

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();

$('.btn-nav').click(function(){

$('.lightbox-content').html("<div class='close'>&times;</div><iframe width='100%' height='390' src='http://www.premierinc.com' frameborder='0' allowFullScreen></iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();

});

$('.close, #page-overlay').css('cursor','pointer').click(function() {

$('#page-overlay, #lightbox-wrapper').fadeOut();

});

});

</script>

<div id="page-overlay">

<div id="lightbox-wrapper">

<div class="lightbox-content">

</div>

<!-- end lightbox-content -->

</div>

<!-- end lightbox-wrapper -->

</div>

<!-- end page-overlay -->

[kineticcreative123]

Thanks osgood. Thats right I used that youtube lightbox. That project dropped off and i forgot that you helped me with that. Your code is working but the lightbox is applied to all the links in the header not just the "menu".   How would I be able to get "learn more" to open a url in the parent window not the lightbox?

I cleaned up some of that code crap that wasn't being used.

Thanks man!

[Nancy OShea]

kineticcreative123  wrote

How would I be able to get "learn more" to open a url in the parent window not the lightbox?

With AJAX.

[kineticcreative123]

Thanks Nancy. I tried below and it's not working on my page but works by itself? I tried this locally not on the link I sent to the header/menu.

<a href="#" onclick="function()">Text</a>

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-6">

                        <nav role="navigation" class="okayNav pull-right" id="js-navbar-menu">

                            <ul id="navbar-nav" class="navbar-nav">

  <li> <a style="color: #ffc627;" class="btn-nav" >877.777.1552</a></li>

                                <li><a href="https://www.w3schools.com" onclick="function()">Text</a></li>

                                <li><a style="margin-top:5px;padding:7px 15px 7px 15px;background-color:#transparent;border: 2px solid #e7e7e7;border-radius: 7px;line-height: 1.5;" class="btn-nav" href="#">MENU</a></li>

                            </ul>

                        </nav>

                    </div>

[Nancy OShea]

Let's back up a few steps first.

1) are you using Bootstrap & jQuery?

2) what file type is the eBook you're trying to load or is it ordinary HTML?

[kineticcreative123]

Actually it's built using ION interactive. My company is using the platform to quickly build pages/learning exercises but i can place custom code snippets which is what the header is. It's built in html and they can go from chapter to chapter with next buttons. I created the header and they wanted to charge us money to build a custom header and incorporate the lightbox feature. It has to be built using this platform we have no other choice

ion interactive Content Marketing Solutions

https://premierinc.postclickmarketing.com/erp-buying-guide

[kineticcreative123]

After I created the responsive menu styled to our branding I coudn't use their out of the box lightbox feature. If you go through the chapter you can see their version of the menu. lightbox feature that Im trying to replace. Hope that all makes sense.

[Nancy OShea]

If you have access to the code, fix your errors.

Showing results for https://premierinc.postclickmarketing.com/erp-buying-guide - Nu Html Checker

[kineticcreative123]

All the code is generated by them. There is nothing I can do about that I'm not messing with any of it. I just really need to get the lightbox feature working within my custom code block. I have total access to the code but I don't see that as an option.

[osgood_]

kineticcreative123  wrote

How would I be able to get "learn more" to open a url in the parent window not the lightbox?

So can I assume you just want an external page brought into another page BUT NOT in a lightbox?

If so you would just need some simple javascript function to write an iframe to a <div>. In the example below the iframe is written to a div with the class of 'output

http://offers.premierinc.com/  gets written to the output <div> in an iframe

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>onClick Function</title>

<style>

.output {

width: 70%;

height: 500px;

border: 1px solid #f2f2f2;

margin: 0 auto;

}

iframe {

width: 100%;

height: 500px;

}

a {

display: block;

text-align: center;

}

</style>

</head>

<body>

<a href="#" onclick="myFunction()">Text</a>

<div class="output">

</div>

<!-- end output -->

<script>

function myFunction() {

var output = document.querySelector('.output');

output.innerHTML ="<iframe src='http://offers.premierinc.com/'></iframe>"

}

</script>

</body>

</html>

[kineticcreative123]

Hey there

Thanks for the reply. No I need the external webpage to open in a lightbox (MENU). Just like the working lightbox example. The other link "learn more" to go to another page inside the site like normal. The lightbox MENU is opening a table of contents where you can click a chapter and go to that page. Once you click a chapter the lightbox disappears and it goes to that URL in the parent window.

I'm only using ION for specific assessments and ebook things. Once I have the header correct I can re-use the code. I am building landing pages and other mini sites that I would like to carry over the header outside of the ION platform.

[osgood_ · Accepted solution]

kineticcreative123  wrote

Hey there

Thanks for the reply. No I need the external webpage to open in a lightbox (MENU). Just like the working lightbox example. The other link "learn more" to go to another page inside the site like normal. The lightbox MENU is opening a table of contents where you can click a chapter and go to that page. Once you click a chapter the lightbox disappears and it goes to that URL in the parent window.

So your document below IS now opening the the lightbox when you click on the MENU button, is the page which is coming into the lightbox your table of contents?

untitled document

OK I see what you mean that is the stupid Bootstrap classes causing confusion for you! Add the class 'open-lightbox' to the MENU link, like below:

class="btn-nav open-lightbox" href="#">MENU</a></li>

Then change the click function in the script to as below: (marked in red)

<script>

$(document).ready(function() {
$('#page-overlay, #lightbox-wrapper').hide();
$('.open-lightbox').click(function(){
$('.lightbox-content').html("<div class='close'>&times;</div><iframe width='100%' height='390' src='http://www.premierinc.com' frameborder='0' allowFullScreen></iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();
});
$('.close, #page-overlay').css('cursor','pointer').click(function() {
$('#page-overlay, #lightbox-wrapper').fadeOut();
});
});
</script>

[kineticcreative123]

Awesome!!! Thanks osgood Works! I tried changing the width to 50% and the height to 500px. Works but only the page is scaled inside the lightbox leaving the lightbox container the original size. Any way to adjust that size too? Is it possible to have a link in the lightbox page open in the parent window and close the box?

Also wondering how I would get the "learn More' link to open like a normal page link on a site.

Nice work.

[osgood_]

kineticcreative123  wrote

Is it possible to have a link in the lightbox page open in the parent window and close the box?

It is BUT I'm not sure you will be able to mange it.

Can I assume that ALL the pages you are trying to show are pages which you have access to, they are not external links to someone elses pages?

If so then then you can use jQuery 'load' function to load the page with the 'table of contents and clickable links' into the lightbox like the example shows below, which loads a page with the name of 'table_of_contents.html' into the lightbox window.

<script>

$(document).ready(function() {

$('.lightbox-content').load('table_of_contents.html');

});

</script>

As an example lets say that the page 'table_of_contents.html' has 2 links:

<a href="#" class="link-close" data-link="page_1.html">Page 1</a>

<a href="#" class="link-close" data-link="page_2.html">Page 2</a>

You can use a data-link attribute (see example above) to refer to which page you want loaded into a <div> on your page.

Lets say you have a <div> in your page with the class of 'page-output':

<div class="page-output"></div>

You can use the jQuery script  below to grab the data-link information (which is the page name) when one of the links in the 'table_of_contents.html' page is clicked which then loads it into the 'page-output' <div>

<script>

$(document).on('click', '.link-close', function(){

var page = $(this).attr('data-link');

$('.page-output').load(page);

});

</script>

The lighbox closes and the correct page gets loaded into the 'page-output' <div>

[kineticcreative123]

Ok thanks. I'm going to give this a shot. Yes I have access to the pages they are all local. I get what your saying. I think. Basically the link in the lightbox TOC page calls the named page (data-link) which loads the page into the site behind the lightbox and the lightbox closes.

As far as the page-output <div> goes can I place that <div> around the whole page code or does it matter where it's placed? Have all the page content inside that div? If not it would load a page into a page? Or would all the other code be dismissed and just have that div load?

Do you have any suggestion on how to get that dang link in the header to go to a page in the site (learn more).

[osgood_]

kineticcreative123  wrote

As far as the page-output <div> goes can I place that <div> around the whole page code or does it matter where it's placed? Have all the page content inside that div? If not it would load a page into a page? Or would all the other code be dismissed and just have that div load?

It depends what you want to do. When a user first comes to the page what is there apart from the header 'menu' link etc?

If there is some default information - do you want to hide that and show the new information which is called into the page-output <div> from the 'table of contents' links which are in the lightbox?

I havent tested it but, yes, if you wrap the page-output <div> around whatever is already there it will most lilkey just get replaced and the new information be shown.

[kineticcreative123]

OK got it to work without the page-output code. For some reason it works on its own. Check out the link again.

untitled document

How can I get the learn more link to simply go to another url. I have a url in there but the link isn't working. Would this have to be the AJAX link code that Nancy was referring to? Not sure why it doesn't work.

[osgood_]

kineticcreative123  wrote

OK got it to work without the page-output code. For some reason it works on its own. Check out the link again.

OK well that workflow when a link is clicked just goes to another page.............the information is not coming into the same page........so to get any further links you have to go back to the orginal page. Yes, its a much simpler approach but maybe not so user friendly.

Maybe consider deploying the' menu' lightbox on each linked page. (Edited, you have!) so all is well

kineticcreative123  wrote

How can I get the learn more link to simply go to another url. I have a url in there but the link isn't working. Would this have to be the AJAX link code that Nancy was referring to? Not sure why it doesn't work.

Leave it as it is and I'll take a look.

[osgood_]

kineticcreative123  wrote

How can I get the learn more link to simply go to another url. I have a url in there but the link isn't working. Would this have to be the AJAX link code that Nancy was referring to? Not sure why it doesn't work.

Ok I tracked it down to the id below on the <nav></nav>. I dont know what it does or what its for but if you remove it your link will work.

id="js-navbar-menu"

[kineticcreative123]

That worked but it you look close you can see little black dots like it's not loading js.

[osgood_]

Thats just the default ul li list styling.

If you add the below css to your css styles the dots will go away:

nav ul {

list-style: none;

}