Jump to content

Not working and it should

pheidole

By pheidole
in Javascript Help

 Share

Recommended Posts

pheidole Member

pheidole

Posted
Posted (edited)

Nothing happens when i click on it.... Not sure why... Could it be XAMMP? Im running the latest version and do not have access to a live server to test. Thanks

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.hover_bkgr_fricc{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    min-height: 100px;
    vertical-align: middle;
    width: 60%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}


</style>
</head>
<body>
<script src="pop.js"></script>
<a class="trigger_popup_fricc">popup</a>

<div class="hover_bkgr_fricc">
    <span class="helper"></span>
    <div>
        <div class="popupCloseButton">X</div>
        <p>adding latert<br />blah!</p>
    </div>
</div>

</body>
</html>

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

IN THE POP FILE SAVED IN THE SAME DIRECTORY

$(window).load(function () {
    $(".trigger_popup_fricc").click(function(){
       $('.hover_bkgr_fricc').show();
    });
    $('.hover_bkgr_fricc').click(function(){
        $('.hover_bkgr_fricc').hide();
    });
    $('.popupCloseButton').click(function(){
        $('.hover_bkgr_fricc').hide();
    });
});

 

Edited by pheidole
Link to comment
https://forums.phpfreaks.com/topic/307848-not-working-and-it-should/
Share on other sites
cyberRobot Prolific Member

cyberRobot

Posted
Posted (edited)

I'm guessing you mean Firefox, which is a Mozilla-based browser. Assuming that's correct, have you used Firefox's Web Console before? More information about accessing the console can be found here:
https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console

In the console, are you getting any JavaScript errors?

Edited by cyberRobot
fixed typo
cyberRobot Prolific Member

cyberRobot

Posted
Posted

By the way, I didn't see anything in the code above. Does your real code import the necessary code so that you can use jQuery? If not, your browser's developer console probably says something like "Uncaught ReferenceError: $ is not defined".

Note that you can import the library from Google (https://developers.google.com/speed/libraries/).

pheidole Member

pheidole

Posted
  • Author
Posted (edited)

yeah, its firefox i don't think Mozilla makes any other browsers do they? i have developer tools installed, no errors

i just put the Javascript and css into the same file... It should run, but.... If you wish you can toss i into a file and give it a go and see if it works for you..

 

i think imma move on and concede defeat and try my secondary plan. I really was wanting to keep js off my site anyhow 

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
.hover_bkgr_fricc{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    min-height: 100px;
    vertical-align: middle;
    width: 60%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}


</style>
</head>
<body>

<sript>
$(window).load(function () {
    $(".trigger_popup_fricc").click(function(){
       $('.hover_bkgr_fricc').show();
    });
    $('.hover_bkgr_fricc').click(function(){
        $('.hover_bkgr_fricc').hide();
    });
    $('.popupCloseButton').click(function(){
        $('.hover_bkgr_fricc').hide();
    });
});

</script>
<a class="trigger_popup_fricc">popup</a>

<div class="hover_bkgr_fricc">
    <span class="helper"></span>
    <div>
        <div class="popupCloseButton">X</div>
        <p>adding latert<br />blah!</p>
    </div>
</div>

</body>
</html>

 

Edited by cyberRobot
fixed <script> tag and added code tags
cyberRobot Prolific Member

cyberRobot

Posted
Posted

Your code works for me when I import the jQuery library. Basically, I added the following line above your <script> tag: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

For some reason, I also needed to change the following: 

$(window).load(function() {

To this 

$(document).ready(function() {

The popup seems to open and close now.

  • Thanks 1
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.