We have a 300x250 banner with 3 click events.
First click event will activate a lever.
Second click event is a CTA (i.e. exit event) that takes the user to a URL.
Third click event is the replay icon.
The issue is that every click will take the user to the URL (i.e. exit event).
How can I separate each click event? Is it done within Flash? Or after the Swiffy conversion (i.e. within the HTML/JS)?
Does this have anything to do with bubbling? Or is it that the exit event is somehow being tied to every click?
I thought about having the clicks timed but that screws up the whole experience.
I've tried stopPropigation but it prevents the add from working. Also, I don't want the first click to be stopped. It still needs to work accordingly.
HTML
<div id="bg-exit">
<div id="swiffycontainer" style="width: 300px; height: 250px">
<script type="text/javascript" src="test.js"></script>
</div>
JS
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, { });
stage.start();
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
Related
I am testing my SvelteKit site with Cypress. I sometimes experience flaky tests, similar to what has been described here: https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/. In short, Cypress sometimes finds and clicks a button before the event listeners are attached - as a result, the click goes nowhere. The proposed solution is to simply re-try clicking until the appropriate listeners have been attached. That works in my case as well. However, though I do understand why this can be an issue in the example given in the blog post (it's a large calendar modal), I find it hard to justify that this issue arises when using a simple Svelte button.
Here is a simple example of a button that reveals some content when clicked:
<script>
let hide = true;
</script>
<button
on:click={() => {
console.log('clicked');
hide = false;
}}>
Show
</button>
<span class:hide>Content</span>
<style>
.hide {
visibility: hidden;
}
</style>
The corresponding test sometimes passes, sometimes fails:
it('reveals content on click', () => {
cy.contains('Show').click();
cy.contains('Content').should('be.visible');
});
Again, I am aware this can be fixed by re-trying to click the button. And if this is what it takes to make Cypress work with Svelte/SvelteKit, then that's fine with me. But I am wondering: Why would this even be an issue?
Minimal reproduction repo: https://github.com/sophiamersmann/test-svelte-kit-cypress
I think the problem lies with Vite, which uses ES modules to load the page and it's components.
Adding an intercept before the cy.visit() seems to give consistent results.
(Note the URL to intercept may vary, you can get it from the last entry in devtools Network).
beforeEach(() => {
cy.intercept('index.svelte?svelte&type=style&lang.css').as('svelte')
cy.visit('/');
cy.wait('#svelte')
});
Using cypress-grep to burn-test
npx cypress run --env burn=100
With intercept
Without intercept
Why is it not hydration?
If you create an equivalent Svelte app with hydratable set to true, it will pass the burn test - IMO because it uses rollup instead of vite to deliver the app to the browser.
SvelteKit will by default do server side rendering (SSR), which means the complete HTML is sent to the browser, including the button. That HTML then needs to be hydrated afterwards to become interactive. This means that some code runs so that Svelte connects to the HTML that already exists. Cypress is likely "too fast" here and clicks the button before that hydration step is completed, therefore nothing happens.
It does not happen with pure Svelte because there's no SSR involved. There's a blank index.html page initially which is completely filled by Svelte's JavaScript inside the browser, so the moment the button is visible, the event listener and everything else is already initialized by Svelte.
Comparison by steps:
SvelteKit with SSR:
Go to page X
Page X is rendered on the server
Page X is sent to the browser, with the complete HTML
Svelte hydrates the HTML (Race condition with Cypress' click test)
Completed
Pure Svelte or SvelteKit without SSR:
Go to page X
Blank page is sent to the browser
Svelte constructs and initializes the HTML inside the browser (No race condition with Cypress' click test)
Completed
Component
<script>
import { onMount } from 'svelte'; // <- Here
let init = false;
onMount(() => {
init = true;
});
let hide = true;
</script>
<button
data-init={init}
on:click={() => {
console.log('clicked');
hide = false;
}}>
Show
</button>
<span class:hide>Content</span>
<style>
.hide {
visibility: hidden;
}
</style>
Cypress
it('reveals content on click', () => {
cy.get('[data-init=true]').should('exist'); // <- Here
cy.contains('Show').click();
cy.contains('Content').should('be.visible');
});
I am a new front end developer and I am having problem doing my project. I used modal in a modal and it works. My first modal is a long modal which needs to be scrolled to see the entire content.
<a data-toggle="modal" data-target="#modalmessage1"><button class="btn btn-gold tdc-width-100 tdc-mt-10" ><img class="img-button-icon" src="<?php echo base_url();?>img/email-white.png">SEND MESSAGE</button></a>
The problem is: When the second modal is closed. the scroll refers to the body. I can not scroll the first modal to see the whole content.
Question: How can I enable the scroll of the first modal after closing the second modal?
When dealing with bootstrap stacked modal, most common problems are
2nd modal overlay appearing behind first modal
on closing 2nd modal, scrolling disappear because modal-open removed from <body>
both problems can be solved with custom code as suggested by bootstrap
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
$(document).ready(function () {
$('secondmodalselector').on('show.bs.modal', function () {
$('firstmodalselector').css('z-index', 1039); //this will push the first modal overlay behind second modal overlay
});
$('secondmodalselector').on('hidden.bs.modal', function () {
$('firstmodalselector').css('z-index', 1041); //bring back the first modal overlay to it's normal state when 2nd modal closed
$('body').addClass('modal-open'); // add `modal-open` class back to body when 2nd modal close so first modal will be scrollable
});
});
I'm using Foundation 5 & WordPress.
I am trying to launch a second Reveal Modal from an AJAX loaded Reveal Modal. It's not working for me.
I have two divs at the bottom of my page:
<div id="industryModal" class="reveal-modal" data-reveal></div>
<div id="portfolioModal" class="reveal-modal" data-reveal></div>
I launch the first modal with content from another page (so far so good):
<a id="business-services-link" href="/approach/investment-strategy/industry/business-services" data-reveal-id="industryModal" data-reveal-ajax="true">
First Reveal Modal works correctly. I then try to launch a second modal (from the first AJAX loaded content):
<a href="<?php the_permalink(); ?>" data-reveal-id="portfolioModal" data-reveal-ajax="true">
Now I am simply taken to the new page. The content is not loaded into a second modal. I've tried adding the #portfolioModal div on the original page, and on the page loaded into the first modal. In neither case is the third page loaded into the second modal.
Any idea what I'm doing wrong?
You need to call the second modal using javascript on ajax returned modal page.
Try this:
Add the second modal wrapper somewhere in your document first (you cannot reuse the currently opened modal):
<div id="modal-anotherPage" class="reveal-modal auto_width medium" data-reveal></div>
Then set event handler for links inside your current modal:
$('a.linksinsideyourmodal').click(function(e) {
$('#modal-anotherPage').foundation('reveal', 'open', {
url: $(this).attr('href')
});
return false;
});
Note that this only works with foundation version 5.2.0, the one before it somehow doesn't want to return ajax content on second modal.
Your problem might be that
<?php the_permalink(); ?>
returns an address with "http://".
Reveal wont use that address correctly. Reveal will only use ajax with relative URLs, not absolute ones, and it will only work when referencing files on the same server.
I'm experiencing a problem ONLY in Chrome where an Ajax response is not being displayed. Oddly, when I hover over the page's main menu, the response shows up and also stays when I move the mouse away again from the main menu.
Here is a more specific description:
The page contains a search box that allows the user to start typing a contact name. As the user types, an ajax request is made to return a list of suggested contacts. The user can then click on a radio button corresponding to a contact in that list to display all the contact information of that one person. Up to that point everything works fine. But now if the user goes back to the search box to change his search, the previously returned list of contacts goes away, but the new one from the new search does not show up. It is the click on the radio button that causes the following search not to display any ajax responses. The odd thing now is that the response does show up if the user hovers over the main menu at the top of the page (which uses css), and it also stays if the user moves the mouse away again from the menu and everything works fine afterwards. Here is the page structure:
<div id="fixedTopBar">
<?php
include("include/mainMenu.php");
?>
</div>
<div id="pageContent">
<div id="contactListContainer">
<form>
<input id="contactSearchBox" type="text" autocomplete="off" onkeyup="showHint(this.value, 'contactList', null , 'include/ajax/getContacts.php')">
</form>
<div id="contactList">
<form>
<?php
echoAllContacts(getContactsFromDatabase());
?>
</form>
</div>
</div>
<div id="profile"></div>
The ajax request is made with the showHint() function in the id="contactSearchBox" input, and the response is displayed within the id="contactList" div.
So in short, the click on a radio button causes the problem, and hovering over the top menu solves the problem (very strange no?).
Please let me know what other code you need to track down the problem if you have any ideas, or if anything I said did not make sense.
Thanks in advance!
I was able to solve my problem with some css:
The id="contactListContainer" div was positioned: fixed ...once I positioned it absolute, the problem was gone. Now, to actually position it fixed and not have the problem, I also had to add the position:fixed or position:absolute property to the child div id="contactList".
I would like to configure some kind of ajax loader to an action that executes a file upload. Once the file is quite large (Excel with more than 2000 rows), it takes sometime to be processed and its quite unpleasant to the user, wait with no other feedback than the displayed by the browser.
For me, the ideal solution, would be a blocking popup, displaying a message "Processing the file..." (or something like that), to prevent users to upload another file in the meantime.
Well... I've got something like this in place on a Symfony app although this doesn't really relate to Symfony:
TEMPLATE:
<input type="submit" class="jq-upload" value="Upload" /> // submit button
<div class="jq-loader"></div> // empty div for a loader image
JS:
$(document).ready(function()
{
$(".jq-upload").click(function() {
$(".jq-loader").addClass("jq-load-icon");
});
});
CSS:
.jq-load-icon {width: 16px; height: 16px; background: url('../images/loader.gif') no-repeat;}
So, basically the click on upload button adds a class to the empty div next to it, which has an animated gif as a background image. In this case, it's a typical loading icon.
That should give you enough to create a popup or adjust it to your needs.