element unvisible until developer console opened - javascript

I've got a website where some LayerSlider elements stay invisible until
the window is resized
I disable the Bookmarks bar in Chrome (whaaat ?)
I switch on Chrome debugger tools
The issue also appears in Firefox and Safari on OS X (all on the newest versions).
I have no idea what that could be. To me it looks like some OS render issue.
I am looking for a workaround.
How can I trigger some kind of repaint after pageload that will unhide those elements? (same thing that happens when I open the dev console for instance)
I tried jQuery(document.body).hide().show(); but that doesn't work.
There is bit more info to it:
The image is hidden because it is scaled to zero height and with after the initial load
<img src="http://www.example.com/wp-content/uploads/2016/09/example.png" class="ls-bg" alt="alpha_video" style="padding: 0px; border-width: 0px; width: 0px; height: 0px; margin-left: 765.5px; margin-top: 299px;">
After the resize of the window the image size of that element suddenly changes (some kind of on the fly HTML manipulation)
<img src="http://www.example.com/wp-content/uploads/2016/09/example.png" class="ls-bg" alt="alpha_video" style="padding: 0px; border-width: 0px; width: 1508px; height: 612.625px; margin-left: 0px; margin-top: -11.8125px;">
How is such a resize being done?
Why doesn't it happen after the initial load?
How can I trigger it?

How can I trigger some kind of repaint after pageload that will unhide
those elements?
function afterload(callback) {
if (document.readyState === 'complete') {
callback();
} else {
jQuery(window).on('load', callback);
}
}
afterload(function () {
jQuery(window).trigger('resize');
});

In the past I've had luck with:
-webkit-transform: translate3d(0,0,0);
and/or in older IE:
hasLayout: true;
If you share some more info might be able to pinpoint it down a bit more.

With help of Michael Sparks I created this solution. It can be placed anywhere in the header, body or footer. It will be executed after the entire page has loaded to make sure that all elements get fixed.
<script type="text/javascript">
jQuery( window ).load(function(){
jQuery( window ).trigger( 'resize' );
});</script>

Related

Use an input field in iframe as trigger for a Jquery event

Through this great forum I have managed to find a solution for expanding an iframe with a click through HTML and Jquery.
But it does not solve my problem completely. Where I am now I manage to expand the iframe using a text, but I want to use the input fields in the iframe as the trigger for the function.
I found this thread on how to use the iframe window itself as a trigger and it seems to use this plugin (iFrame Tracker): https://github.com/vincepare/iframeTracker-jquery
Sadly, this does not seem to work on mobile or other touch devices. Therefore, a click on the input field would be the optimal solution.
This is where I am now with a simple text that expands the height of the iframe when clicked:
HTML:
<iframe class="frame" iframe id="bestillframe"
src="iframe source goes here"
height="200px" width="200px"></iframe>
<div id=kilden>
Click here to enlarge the iframe
</div>
Javascript:
$(function(){
$('#kilden').click(function(){
$('#bestillframe').animate({'height':'300'})
})
});
Fiddle with iframe link and mentioned input fields.
http://jsfiddle.net/b6qfJ/51/
Does anyone know how I can get this to work with a click on the input field?
Thanks to the great help of #zer00ne I managed to work this out.
The only issue was that the above section seemed to scale along with the iframe automatic without proper formatting. This lead to an issue where all elements below the iframe would be overlapped and not moved accordingly downwards.
The solution was to give the section an ID and add another .animate function in the expand function so that they both would be triggered at the same time. Not sure if this is the correct way, but it works. And the solution would then be
Solution
Javascript
$(function() {
$('section').on('click', expand);
});
function expand(e) {
$('#ramme').animate({
'height': '300'
})
$('#iframe').animate({
'height': '300'
}).css('pointer-events', 'auto');
$('section').off('click', expand);
}
HTML
<section id=ramme>
<iframe id="iframe" src="iframe source goes here" height="200"
width="900" scrolling="no";></iframe>
</section>
CSS
section {
position: relative;
height: 200px;
width:600px;
padding: 0;
}
#iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
DEMO
From fiddle:
http://jsfiddle.net/b6qfJ/92/
This is a great forum. Thanks!
I reread the question and realized that your objective is different than what I initially thought.
Just wrap the iframe in a block element and
make sure that the first thing the user clicks is the block element containing the iframe and not the iframe itself by making it unclickable with pointer-events:none.
Once the iframe has successfully enlarged, remove the click handler and enable the iframe to be clickable with pointer-events:auto.
Also, it helps to keep container and iframe together by using position: relative on the container and position:absolute on the iframe.
I'm well aware that you wanted the actual inputs to be event.target but besides the fact that it's impractical, the fact that at a height of 200px the user doesn't even see any inputs in the first place.
Demo
$(function() {
$('section').on('click', expand);
});
function expand(e) {
$('#iframe').animate({
'height': '300'
}).css('pointer-events', 'auto');
$('section').off('click', expand);
}
section {
position: relative;
height: 200px;
width: 200px;
padding: 0;
outline: 1px dashed red
}
#iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<iframe id="iframe" src="iframe source goes here" height="200" width="200"></iframe>
</section>

Using browser to find the javascript code currently running

Is it possible to find the javascript code for current event using the console, on any browser?
For example, please see this JSFiddle. This is the corresponding code:
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
/*position: absolute;*/
float:right;
background-color: #FA9595;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 12px;
box-shadow: 0 0 2px #E50F0F;
cursor: pointer;
}
<input type="range" min="12" max="120" id="slider" />
<div class="text" contenteditable="true" style="cursor:grab;">hello1<button class="close-icon dbutton" type="reset"/></div>
<div class="text text1" contenteditable="true" style="cursor:grab;">hello2<button class="close-icon dbutton1" type="reset"/></div>
<div class="text text2" contenteditable="true" style="cursor:grab;">hello3<button class="close-icon dbutton2" type="reset"/></div>
<div class="text text3" contenteditable="true" style="cursor:grab;">hello4<button class="close-icon dbutton3" type="reset"/></div>
$("#slider").on("change",function(){
var v=$(this).val();
$('.text.active').css('font-size', v + 'px');
});
$('.text').on('focus',function(){
$('.text').removeClass('active');
$(this).addClass('active');
});
$(document).on("click",".close-icon",function(){
$(this).closest('div').remove();
//alert('hiii');
});
Here I write the code to enlarge the text and close the div. Now is it possible to see the code responsible for resizing the text, when I am resizing the that text?
UPDATE : I know how to inspect element, change style and other things
. But here i am asking to know how to detect the javascript code or
function for the current event.Hi, it's not about console .log
function . I know this already . I am asking that how to know which
function is working when i click the close button , how can i see that
code in browser . Here i write the code , i understand where the code
is . What about if some other write the code and i am looking browser
for detecting what code and what event is running
You can run the console.log() function on the browser console in situations where it could return useful info for debugging. For example, if you add, on your script, console.log() as:
$("#slider").on("change",function(){
var v=$(this).val();
console.log(v);
...
});
Then open it in the browser and activate the inspector (shift + cmd + i on Chrome on the Mac, for example), and click on the Console tab: you should see the value of v changing.
Checking which code is responsible for specific tasks may be tricky. One way you can try is to, using Chrome, open the Console, click on the Sources tab, and click on the little pause icon (pause script execution). Then, when any javascript tries to run, Chrome will pause and show you the code. The problem with this approach is that many times there is a loop running constantly. And if that's the case, as soon as you press pause, Chrome will show you the line of javascript of that loop, and you won't have time to actually execute the action you're interested at finding the code for.
If you have an idea of which script is running, you can click the Sources tab, browse to the javascript file that has the code, and add a breakpoint. Then you can execute the action, and if the action involves that piece of code, Chrome will pause at that breakpoint. In the same tab (Sources), try to click the line number, and set "Never pause here". Even though this method won't help you out with every possible code you may be inspecting, sometimes it will.
Also on Chrome, use the console search (open console then cmd + alt + f on Chrome for Mac) to search through all the resources loaded on that page. If you know you're looking for a script that deals with a certain CSS class or id, you can search for this id or class, see if you can find it on a javascript resource, and add a breakpoint. When you get to that point, the script will pause, and you will be able to run commands on the console. If your break point was, say, in a class method, then you would be in the scope of that class method context.
You can use Inspect Element on Chrome by right click to see your code. Select source tab from the inspect window. Same way in Firefox too. Place a break in corresponding event. Using Firebug in Firefox will be better.
Update: examples attached.
To open DevTools hit Ctrl + Shift + I on windows then tab Console use examples below:
console.log("test");//add this were ever you want to test
//examples
Element.onclick = function(){
console.log("clicked");
}
Element.onkeyup = function(){
console.log("keyup detection");
}
window.onload = function(){
console.log("page loaded");
}
Also to catch error by line you can use
try{
var invalid = "hello world';//<===== here is invalid string
}catch(e){
console.log(e.stack);//catched error details (line, file, error)
}
is it possible see the code for resize the text when i am resizing the that text ?
Example to detect button click, focus and range change
Check Fiddle

keep window hidden until init completes

I am creating an window with a significant initialization process and I would like to keep the window hidden until init finishes. Right now at the beginning of my js code I hide the window right after it is created and then show it when init is complete. But this creates a less than pleasing flash when the app is launched as the window appears, disappears and then re-appears.
Is there a way to keep the window invisible while the init runs?
My best guess, without seeing your code, is that you need to hide the application window using CSS in the head section of your page. This way it is hidden before the browser ever renders the page. Trying to hide the window with Javascript won't work as nicely. That's because the script can't hide the window until after the browser creates it. So, depending on conditions, the user might see it flash on start.
The snippet below shows how to do this using the CSS visibility attribute. Alternatively, you may also use the display attribute.
Show and then run the snippet to try.
setTimeout(function() {
// some long init process here
// make visible on ready
window.spinner.style.display = 'none';
window.app.style.visibility = 'visible';
}, 3000);
#app {
height: 10em;
visibility: hidden;
background-color: white;
}
h3,
h4 {
margin: 0;
padding: 4px;
color: white;
background-color: steelblue;
}
#spinner {
height: 100px;
position: absolute;
}
body {
background-color: lightgray;
}
<h3>Header</h3>
<div id="content">
<img id="spinner" src="http://i.stack.imgur.com/kOnzy.gif">
<div id="app">APPLICATION READY</div>
</div>
<h4>footer</h4>
I agree with #jeff about providing some sort of progress indicator. However, the standard way to create a window that's hidden by default in Electron is to use the show option when creating the browser window:
const myWindow = new BrowserWindow({ show: false });
Then when loading/processing is finished you can make the window visible:
// this code runs in the renderer process
import { remote } from 'electron';
remote.getCurrentWindow().show();
Hide it first with CSS. display: none or visibility:hidden.
Then show with javascript by changing display or visibility after init.

Safari flickers when image tag is replaced by the same

Our Safari/Mac users report flickering of image on a page segment which is periodically updated by AJAX call. We are not able to reproduce the behavior in Chrome/Firefox/IE on Win and Linux, not even Chrome on Mac.
We do not have a Mac available for development, so I can only sometimes ask a friend to check it for me. I prepared a simplified test case: https://jsfiddle.net/tgb1jaog/1/
We use IMG element which is inside the refreshed div, but is always the same and on the same position for given page and it blinks on each refresh when viewed in Safari - on real page and on jsfiddle too (first div).
I tried to change it to CSS background set by STYLE on DIV in place of the original IMG, that seems to work fine on jsfiddle (second div), but blinks the same way on our real page.
I am going to try to define the background in external css and give the div only a class (jsfiddle third div), but as the test case behavior differs I am not sure it will help.
All those work well using different browser.
Is it some kind of a bug in Safari (I was not able to find any reference)? Or are there some ways how to make Safari work as others?
function replace(id, data) {
$("#" + id).empty();
$("#" + id).append($.trim(data));
$("#" + id).hide();
$("#" + id).show()
}
function d1() {
replace("d1", '<img src="https://live.victoriatip.cz/images/baseball-header.jpg" width="797" height="69" />');
}
function d2() {
replace("d2", '<div style="background: url(https://live.victoriatip.cz/images/baseball-header.jpg); width: 797px; height: 69px;"></div>');
}
function d3() {
replace("d3", '<div class="b"></div>');
}
setInterval(d1, 2000);
setInterval(d2, 2500);
setInterval(d3, 3000);
#d3 .b {
background: url("https://live.victoriatip.cz/images/baseball-header.jpg");
width: 797px;
height: 69px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clearfix" id="d1"></div>
<div class="clearfix" id="d2"></div>
<div class="clearfix" id="d3"></div>
It turns out Safari will re-request an image if the cache has expired, even if it's already in memory (unlike Chrome, Firefox etc). If you look at the Safari debug tools while your jsfiddle is running you'll see the server requests piling up (they return a 304 but it's enough to cause the flicker).
This image in your jsfiddle example: https://live.victoriatip.cz/images/baseball-header.jpg is set to expire straight away - Expires: Wed, 19 Aug 2015 14:26:53 GMT.
If you tweak your cache headers the problem should go away.
Here's an updated jsfiddle with a google image that caches: https://jsfiddle.net/tgb1jaog/2/.

wmuslider only loads sometimes

I am currently making a website for a dance studio and am using the wmuslider to create a slider in the middle of the homepage. Only problem is that the slider sometimes loads and sometimes doesn't. I found that this is a problem in all the browsers I use: Chrome, Firefox and Explorer. I'm guessing this is a problem with the jquery script. Does anybody have any suggestions?
Thanks,
Aleks
The website is: http://www.aleksdesign.ca/dance/
Browsers might be trying to initialise the slider before the DOM is ready. Wait till its ready:
<script>
$( document ).ready(function() {
var options = {touch: true, animation: "slide"};
$(".wmuSlider").wmuSlider(options);
});
</script>
See http://api.jquery.com/ready/
Make this changes in demo.css
.wmuSlider {
position: relative;
overflow: hidden;
set some height -> height: 100px;
}
.wmuSlider .wmuSliderWrapper {
remove -> display:none
}

Categories