snipt

Ctrl+h for KB shortcuts

JavaScript

Popup Gadget Script - Html + Javascript [W.I.P]

<head><script>

            function cancelNotification(){
                if($$('#greetings a').length>0) {
                    var notificationCookieName = jQuery($$('#greetings')[0]).data('cookie');
                } else {
                    return;

                }

                if(document.readCookie(notificationCookieName) != "yes"){
                    var div = new Element('div', { 'id': 'cancelNotification'});
                    div.setStyle({
                        background: "none repeat scroll 0 0 #444444",
                        border: "1px solid #000000",
                        position: "absolute",
                        opacity: "0.6",
                        top: "280px",
                        width: "303px",
                        left: "13px",
                        padding: "6px",
                        zIndex: "5",
                        boxShadow: "0 1px 1px #000",
                        borderRadius: "3px",
                        fontSize: "12px"
                    });
                    div.innerHTML = '<input type="checkbox" id="cancelNotificationCheckbox"><label for="cancelNotificationCheckbox" style="color:white;padding-left:3px;">Dismiss this banner.</label>';
                    div.observe('click',function(){
                        setTimeout(function(){
                            document.createCookie(notificationCookieName, 'yes', 30);
                            $('greetings').style.display = "none";
                        },300);
                    });
                    $$('#greetings img')[0].style.display = "block";
                    $('greetings').insert({ bottom: div});
                    $('greetings').style.display = "block";
                }
            }

            if($('greetings')){

                var b = $('greetings').getStyle('bottom');
                $(document.body).insert($('greetings'));
                $('greetings').mouseEnter(function(e){
                    e.shift({bottom:"38px", duration:0.5});
                }, function(e){
                    e.shift({bottom:b, duration:0.5});
                });
            }

             cancelNotification();

            // jQuery("#greetings").css("left", jQuery("#menu").offset().left-15);

            // jQuery(window).on("resize", function(){
            //     jQuery("#greetings").css("left", jQuery("#menu").offset().left-15);
            // })
            // console.log();
        </script>
</head>
<div class="no-transition" id="greetings" data-cookie="Kitchen" style="bottom: -220px; position: fixed; z-index: 20; display: block;"><a href="http://www.jotform.com/blog/87-What-s-Cooking-in-the-JotForm-Kitchen" target="_blank"><img src="http://www.jotform.com/images/banners/Jot-KitchenBanner.png" border="0" style="display: block;"></a><div id="cancelNotification" style="background-image: none; background-attachment: scroll; background-color: rgb(68, 68, 68); border: 1px solid rgb(0, 0, 0); position: absolute; opacity: 0.6; top: 280px; width: 303px; left: 13px; padding: 6px; z-index: 5; box-shadow: rgb(0, 0, 0) 0px 1px 1px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-size: 12px; background-position: 0px 0px; background-repeat: repeat repeat;"><input type="checkbox" id="cancelNotificationCheckbox"><label for="cancelNotificationCheckbox" style="color:white;padding-left:3px;">Dismiss this banner.</label></div></div>
<a href="http://www.jotform.com/blog/87-What-s-Cooking-in-the-JotForm-Kitchen" target="_blank"><img src="http://www.jotform.com/images/banners/Jot-KitchenBanner.png" border="0" style="display: block;"></a>
<img src="http://www.jotform.com/images/banners/Jot-KitchenBanner.png" border="0" style="display: block;">
</a>
<div id="cancelNotification" style="background-image: none; background-attachment: scroll; background-color: rgb(68, 68, 68); border: 1px solid rgb(0, 0, 0); position: absolute; opacity: 0.6; top: 280px; width: 303px; left: 13px; padding: 6px; z-index: 5; box-shadow: rgb(0, 0, 0) 0px 1px 1px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-size: 12px; background-position: 0px 0px; background-repeat: repeat repeat;"><input type="checkbox" id="cancelNotificationCheckbox"><label for="cancelNotificationCheckbox" style="color:white;padding-left:3px;">Dismiss this banner.</label></div>
</div>

Description

A script to show a pop-up gadget of some sort on a page.
https://snipt.net/embed/de54d6ed34160ca3edec83a786ffd278/
/raw/de54d6ed34160ca3edec83a786ffd278/
de54d6ed34160ca3edec83a786ffd278
js
JavaScript
66
2019-08-25T09:10:25
True
False
False
Mar 23, 2016 at 12:32 PM
/api/public/snipt/144907/
popup-gadget-script-html-javascript-wip
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a> <a href="#L-53">53</a> <a href="#L-54">54</a> <a href="#L-55">55</a> <a href="#L-56">56</a> <a href="#L-57">57</a> <a href="#L-58">58</a> <a href="#L-59">59</a> <a href="#L-60">60</a> <a href="#L-61">61</a> <a href="#L-62">62</a> <a href="#L-63">63</a> <a href="#L-64">64</a> <a href="#L-65">65</a> <a href="#L-66">66</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="o">&lt;</span><span class="nx">head</span><span class="o">&gt;&lt;</span><span class="nx">script</span><span class="o">&gt;</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a> <span class="kd">function</span> <span class="nx">cancelNotification</span><span class="p">(){</span> </span><span id="L-4"><a name="L-4"></a> <span class="k">if</span><span class="p">(</span><span class="nx">$$</span><span class="p">(</span><span class="s1">&#39;#greetings a&#39;</span><span class="p">).</span><span class="nx">length</span><span class="o">&gt;</span><span class="mi">0</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-5"><a name="L-5"></a> <span class="kd">var</span> <span class="nx">notificationCookieName</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">(</span><span class="nx">$$</span><span class="p">(</span><span class="s1">&#39;#greetings&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;cookie&#39;</span><span class="p">);</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span><span id="L-7"><a name="L-7"></a> <span class="k">return</span><span class="p">;</span> </span><span id="L-8"><a name="L-8"></a> </span><span id="L-9"><a name="L-9"></a> <span class="p">}</span> </span><span id="L-10"><a name="L-10"></a> </span><span id="L-11"><a name="L-11"></a> <span class="k">if</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">readCookie</span><span class="p">(</span><span class="nx">notificationCookieName</span><span class="p">)</span> <span class="o">!=</span> <span class="s2">&quot;yes&quot;</span><span class="p">){</span> </span><span id="L-12"><a name="L-12"></a> <span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Element</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="s1">&#39;id&#39;</span><span class="o">:</span> <span class="s1">&#39;cancelNotification&#39;</span><span class="p">});</span> </span><span id="L-13"><a name="L-13"></a> <span class="nx">div</span><span class="p">.</span><span class="nx">setStyle</span><span class="p">({</span> </span><span id="L-14"><a name="L-14"></a> <span class="nx">background</span><span class="o">:</span> <span class="s2">&quot;none repeat scroll 0 0 #444444&quot;</span><span class="p">,</span> </span><span id="L-15"><a name="L-15"></a> <span class="nx">border</span><span class="o">:</span> <span class="s2">&quot;1px solid #000000&quot;</span><span class="p">,</span> </span><span id="L-16"><a name="L-16"></a> <span class="nx">position</span><span class="o">:</span> <span class="s2">&quot;absolute&quot;</span><span class="p">,</span> </span><span id="L-17"><a name="L-17"></a> <span class="nx">opacity</span><span class="o">:</span> <span class="s2">&quot;0.6&quot;</span><span class="p">,</span> </span><span id="L-18"><a name="L-18"></a> <span class="nx">top</span><span class="o">:</span> <span class="s2">&quot;280px&quot;</span><span class="p">,</span> </span><span id="L-19"><a name="L-19"></a> <span class="nx">width</span><span class="o">:</span> <span class="s2">&quot;303px&quot;</span><span class="p">,</span> </span><span id="L-20"><a name="L-20"></a> <span class="nx">left</span><span class="o">:</span> <span class="s2">&quot;13px&quot;</span><span class="p">,</span> </span><span id="L-21"><a name="L-21"></a> <span class="nx">padding</span><span class="o">:</span> <span class="s2">&quot;6px&quot;</span><span class="p">,</span> </span><span id="L-22"><a name="L-22"></a> <span class="nx">zIndex</span><span class="o">:</span> <span class="s2">&quot;5&quot;</span><span class="p">,</span> </span><span id="L-23"><a name="L-23"></a> <span class="nx">boxShadow</span><span class="o">:</span> <span class="s2">&quot;0 1px 1px #000&quot;</span><span class="p">,</span> </span><span id="L-24"><a name="L-24"></a> <span class="nx">borderRadius</span><span class="o">:</span> <span class="s2">&quot;3px&quot;</span><span class="p">,</span> </span><span id="L-25"><a name="L-25"></a> <span class="nx">fontSize</span><span class="o">:</span> <span class="s2">&quot;12px&quot;</span> </span><span id="L-26"><a name="L-26"></a> <span class="p">});</span> </span><span id="L-27"><a name="L-27"></a> <span class="nx">div</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;&lt;input type=&quot;checkbox&quot; id=&quot;cancelNotificationCheckbox&quot;&gt;&lt;label for=&quot;cancelNotificationCheckbox&quot; style=&quot;color:white;padding-left:3px;&quot;&gt;Dismiss this banner.&lt;/label&gt;&#39;</span><span class="p">;</span> </span><span id="L-28"><a name="L-28"></a> <span class="nx">div</span><span class="p">.</span><span class="nx">observe</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="kd">function</span><span class="p">(){</span> </span><span id="L-29"><a name="L-29"></a> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> </span><span id="L-30"><a name="L-30"></a> <span class="nb">document</span><span class="p">.</span><span class="nx">createCookie</span><span class="p">(</span><span class="nx">notificationCookieName</span><span class="p">,</span> <span class="s1">&#39;yes&#39;</span><span class="p">,</span> <span class="mi">30</span><span class="p">);</span> </span><span id="L-31"><a name="L-31"></a> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;greetings&#39;</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s2">&quot;none&quot;</span><span class="p">;</span> </span><span id="L-32"><a name="L-32"></a> <span class="p">},</span><span class="mi">300</span><span class="p">);</span> </span><span id="L-33"><a name="L-33"></a> <span class="p">});</span> </span><span id="L-34"><a name="L-34"></a> <span class="nx">$$</span><span class="p">(</span><span class="s1">&#39;#greetings img&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s2">&quot;block&quot;</span><span class="p">;</span> </span><span id="L-35"><a name="L-35"></a> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;greetings&#39;</span><span class="p">).</span><span class="nx">insert</span><span class="p">({</span> <span class="nx">bottom</span><span class="o">:</span> <span class="nx">div</span><span class="p">});</span> </span><span id="L-36"><a name="L-36"></a> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;greetings&#39;</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s2">&quot;block&quot;</span><span class="p">;</span> </span><span id="L-37"><a name="L-37"></a> <span class="p">}</span> </span><span id="L-38"><a name="L-38"></a> <span class="p">}</span> </span><span id="L-39"><a name="L-39"></a> </span><span id="L-40"><a name="L-40"></a> <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;greetings&#39;</span><span class="p">)){</span> </span><span id="L-41"><a name="L-41"></a> </span><span id="L-42"><a name="L-42"></a> <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;greetings&#39;</span><span class="p">).</span><span class="nx">getStyle</span><span class="p">(</span><span class="s1">&#39;bottom&#39;</span><span class="p">);</span> </span><span id="L-43"><a name="L-43"></a> <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">insert</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;greetings&#39;</span><span class="p">));</span> </span><span id="L-44"><a name="L-44"></a> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;greetings&#39;</span><span class="p">).</span><span class="nx">mouseEnter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> </span><span id="L-45"><a name="L-45"></a> <span class="nx">e</span><span class="p">.</span><span class="nx">shift</span><span class="p">({</span><span class="nx">bottom</span><span class="o">:</span><span class="s2">&quot;38px&quot;</span><span class="p">,</span> <span class="nx">duration</span><span class="o">:</span><span class="mf">0.5</span><span class="p">});</span> </span><span id="L-46"><a name="L-46"></a> <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> </span><span id="L-47"><a name="L-47"></a> <span class="nx">e</span><span class="p">.</span><span class="nx">shift</span><span class="p">({</span><span class="nx">bottom</span><span class="o">:</span><span class="nx">b</span><span class="p">,</span> <span class="nx">duration</span><span class="o">:</span><span class="mf">0.5</span><span class="p">});</span> </span><span id="L-48"><a name="L-48"></a> <span class="p">});</span> </span><span id="L-49"><a name="L-49"></a> <span class="p">}</span> </span><span id="L-50"><a name="L-50"></a> </span><span id="L-51"><a name="L-51"></a> <span class="nx">cancelNotification</span><span class="p">();</span> </span><span id="L-52"><a name="L-52"></a> </span><span id="L-53"><a name="L-53"></a> <span class="c1">// jQuery(&quot;#greetings&quot;).css(&quot;left&quot;, jQuery(&quot;#menu&quot;).offset().left-15);</span> </span><span id="L-54"><a name="L-54"></a> </span><span id="L-55"><a name="L-55"></a> <span class="c1">// jQuery(window).on(&quot;resize&quot;, function(){</span> </span><span id="L-56"><a name="L-56"></a> <span class="c1">// jQuery(&quot;#greetings&quot;).css(&quot;left&quot;, jQuery(&quot;#menu&quot;).offset().left-15);</span> </span><span id="L-57"><a name="L-57"></a> <span class="c1">// })</span> </span><span id="L-58"><a name="L-58"></a> <span class="c1">// console.log();</span> </span><span id="L-59"><a name="L-59"></a> <span class="o">&lt;</span><span class="err">/script&gt;</span> </span><span id="L-60"><a name="L-60"></a><span class="o">&lt;</span><span class="err">/head&gt;</span> </span><span id="L-61"><a name="L-61"></a><span class="o">&lt;</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&quot;no-transition&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;greetings&quot;</span> <span class="nx">data</span><span class="o">-</span><span class="nx">cookie</span><span class="o">=</span><span class="s2">&quot;Kitchen&quot;</span> <span class="nx">style</span><span class="o">=</span><span class="s2">&quot;bottom: -220px; position: fixed; z-index: 20; display: block;&quot;</span><span class="o">&gt;&lt;</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="s2">&quot;http://www.jotform.com/blog/87-What-s-Cooking-in-the-JotForm-Kitchen&quot;</span> <span class="nx">target</span><span class="o">=</span><span class="s2">&quot;_blank&quot;</span><span class="o">&gt;&lt;</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="s2">&quot;http://www.jotform.com/images/banners/Jot-KitchenBanner.png&quot;</span> <span class="nx">border</span><span class="o">=</span><span class="s2">&quot;0&quot;</span> <span class="nx">style</span><span class="o">=</span><span class="s2">&quot;display: block;&quot;</span><span class="o">&gt;&lt;</span><span class="err">/a&gt;&lt;div id=&quot;cancelNotification&quot; style=&quot;background-image: none; background-attachment: scroll; background-color: rgb(68, 68, 68); border: 1px solid rgb(0, 0, 0); position: absolute; opacity: 0.6; top: 280px; width: 303px; left: 13px; padding: 6px; z-index: 5; box-shadow: rgb(0, 0, 0) 0px 1px 1px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-size: 12px; background-position: 0px 0px; background-repeat: repeat repeat;&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;cancelNotificationCheckbox&quot;&gt;&lt;label for=&quot;cancelNotificationCheckbox&quot; style=&quot;color:white;padding-left:3px;&quot;&gt;Dismiss this banner.&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;</span> </span><span id="L-62"><a name="L-62"></a><span class="o">&lt;</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="s2">&quot;http://www.jotform.com/blog/87-What-s-Cooking-in-the-JotForm-Kitchen&quot;</span> <span class="nx">target</span><span class="o">=</span><span class="s2">&quot;_blank&quot;</span><span class="o">&gt;&lt;</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="s2">&quot;http://www.jotform.com/images/banners/Jot-KitchenBanner.png&quot;</span> <span class="nx">border</span><span class="o">=</span><span class="s2">&quot;0&quot;</span> <span class="nx">style</span><span class="o">=</span><span class="s2">&quot;display: block;&quot;</span><span class="o">&gt;&lt;</span><span class="err">/a&gt;</span> </span><span id="L-63"><a name="L-63"></a><span class="o">&lt;</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="s2">&quot;http://www.jotform.com/images/banners/Jot-KitchenBanner.png&quot;</span> <span class="nx">border</span><span class="o">=</span><span class="s2">&quot;0&quot;</span> <span class="nx">style</span><span class="o">=</span><span class="s2">&quot;display: block;&quot;</span><span class="o">&gt;</span> </span><span id="L-64"><a name="L-64"></a><span class="o">&lt;</span><span class="err">/a&gt;</span> </span><span id="L-65"><a name="L-65"></a><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;cancelNotification&quot;</span> <span class="nx">style</span><span class="o">=</span><span class="s2">&quot;background-image: none; background-attachment: scroll; background-color: rgb(68, 68, 68); border: 1px solid rgb(0, 0, 0); position: absolute; opacity: 0.6; top: 280px; width: 303px; left: 13px; padding: 6px; z-index: 5; box-shadow: rgb(0, 0, 0) 0px 1px 1px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-size: 12px; background-position: 0px 0px; background-repeat: repeat repeat;&quot;</span><span class="o">&gt;&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;cancelNotificationCheckbox&quot;</span><span class="o">&gt;&lt;</span><span class="nx">label</span> <span class="k">for</span><span class="o">=</span><span class="s2">&quot;cancelNotificationCheckbox&quot;</span> <span class="nx">style</span><span class="o">=</span><span class="s2">&quot;color:white;padding-left:3px;&quot;</span><span class="o">&gt;</span><span class="nx">Dismiss</span> <span class="k">this</span> <span class="nx">banner</span><span class="p">.</span><span class="o">&lt;</span><span class="err">/label&gt;&lt;/div&gt;</span> </span><span id="L-66"><a name="L-66"></a><span class="o">&lt;</span><span class="err">/div&gt;</span> </span></pre></div> </td></tr></table>
gadget, html, javascript, js, popup
--- 
+++ 
@@ -0,0 +1,66 @@
+<head><script>
+
+            function cancelNotification(){
+                if($$('#greetings a').length>0) {
+                    var notificationCookieName = jQuery($$('#greetings')[0]).data('cookie');
+                } else {
+                    return;
+
+                }
+
+                if(document.readCookie(notificationCookieName) != "yes"){
+                    var div = new Element('div', { 'id': 'cancelNotification'});
+                    div.setStyle({
+                        background: "none repeat scroll 0 0 #444444",
+                        border: "1px solid #000000",
+                        position: "absolute",
+                        opacity: "0.6",
+                        top: "280px",
+                        width: "303px",
+                        left: "13px",
+                        padding: "6px",
+                        zIndex: "5",
+                        boxShadow: "0 1px 1px #000",
+                        borderRadius: "3px",
+                        fontSize: "12px"
+                    });
+                    div.innerHTML = '<input type="checkbox" id="cancelNotificationCheckbox"><label for="cancelNotificationCheckbox" style="color:white;padding-left:3px;">Dismiss this banner.</label>';
+                    div.observe('click',function(){
+                        setTimeout(function(){
+                            document.createCookie(notificationCookieName, 'yes', 30);
+                            $('greetings').style.display = "none";
+                        },300);
+                    });
+                    $$('#greetings img')[0].style.display = "block";
+                    $('greetings').insert({ bottom: div});
+                    $('greetings').style.display = "block";
+                }
+            }
+
+            if($('greetings')){
+
+                var b = $('greetings').getStyle('bottom');
+                $(document.body).insert($('greetings'));
+                $('greetings').mouseEnter(function(e){
+                    e.shift({bottom:"38px", duration:0.5});
+                }, function(e){
+                    e.shift({bottom:b, duration:0.5});
+                });
+            }
+
+             cancelNotification();
+
+            // jQuery("#greetings").css("left", jQuery("#menu").offset().left-15);
+
+            // jQuery(window).on("resize", function(){
+            //     jQuery("#greetings").css("left", jQuery("#menu").offset().left-15);
+            // })
+            // console.log();
+        </script>
+</head>
+<div class="no-transition" id="greetings" data-cookie="Kitchen" style="bottom: -220px; position: fixed; z-index: 20; display: block;"><a href="http://www.jotform.com/blog/87-What-s-Cooking-in-the-JotForm-Kitchen" target="_blank"><img src="http://www.jotform.com/images/banners/Jot-KitchenBanner.png" border="0" style="display: block;"></a><div id="cancelNotification" style="background-image: none; background-attachment: scroll; background-color: rgb(68, 68, 68); border: 1px solid rgb(0, 0, 0); position: absolute; opacity: 0.6; top: 280px; width: 303px; left: 13px; padding: 6px; z-index: 5; box-shadow: rgb(0, 0, 0) 0px 1px 1px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-size: 12px; background-position: 0px 0px; background-repeat: repeat repeat;"><input type="checkbox" id="cancelNotificationCheckbox"><label for="cancelNotificationCheckbox" style="color:white;padding-left:3px;">Dismiss this banner.</label></div></div>
+<a href="http://www.jotform.com/blog/87-What-s-Cooking-in-the-JotForm-Kitchen" target="_blank"><img src="http://www.jotform.com/images/banners/Jot-KitchenBanner.png" border="0" style="display: block;"></a>
+<img src="http://www.jotform.com/images/banners/Jot-KitchenBanner.png" border="0" style="display: block;">
+</a>
+<div id="cancelNotification" style="background-image: none; background-attachment: scroll; background-color: rgb(68, 68, 68); border: 1px solid rgb(0, 0, 0); position: absolute; opacity: 0.6; top: 280px; width: 303px; left: 13px; padding: 6px; z-index: 5; box-shadow: rgb(0, 0, 0) 0px 1px 1px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-size: 12px; background-position: 0px 0px; background-repeat: repeat repeat;"><input type="checkbox" id="cancelNotificationCheckbox"><label for="cancelNotificationCheckbox" style="color:white;padding-left:3px;">Dismiss this banner.</label></div>
+</div>
  • KadeJM
  • 3 years, 5 months ago