In page (hash) link, get to the first visible element - javascript

I have a partial view (handlebars html template) that has a piece for html for desktop and one piece of mobile. I just hide it accordingly using different css classes.
<div class='hideOnMobile showOnDesktop'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Mobile presentations -->
</div>
The important pieces of my css is basically hiding and showing the elements using media queries:
#media only screen and (min-width: 420px) {
.showOnMobile { display: block; }
.hideOnMobile { display: none; }
}
#media only screen and (min-width: 1050px) {
.showOnDesktop { display: block; }
.hideOnDesktop { display: none; }
}
CSS is attached for reference. The css is actually working as expected. The problem is the following:
When the browser receives the url for that specific page http://example.org/page.html#manuals, I would like the document to navigate directly to the first visible <a> element. No matter what, I cannot make the deep link to work with the first visible element. I've read that there is some kind of limitations, but I wanted to know if there is a work around, or if the only option that I have is to emulate the deep link using javascript (that I'm trying to avoid). Thanks a lot

Maybe the markup can be altered?
<a name='manuals' id="manuals" href='#manuals'>Manuals</a>
<div class='hideOnMobile showOnDesktop'>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<!-- Extra html for Mobile presentations -->
</div>
This way, the target of the hash (#manuals) is always visible regardless of the environment. This also makes it a bit more maintainable since you have less duplication.

Related

Split one HTML page to display different views on multiple screens

I have two screens say Screen 1 and Screen 2 and a HTML page with JavaScript/JQuery.
What I want to do is that split the HTML into two views. One on Screen 1 and the other on Screen 2.
Screen 1 has a simple view ( e.g a cinema screen for customers to view ) and Screen 2 has all the controls ( e.g visible to the person on the other end ).
Any possible solution?
Best solution would be to have 2 different pages, after all it's a
system and not a page.
But, since you want a workaround, use Bootstrap (it's
responsive, so should easily adapt to a 2 screen display).
add Bootstrap to HTML <head>:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
to HTML <body>:
<div class="wrapper-fluid">
<div class="container-fluid">
<div class="row">
<div id="screen1" class="col-md-6">
<!-- PAGE 1 HERE -->
</div>
<div id="screen2" class="col-md-6">
<!-- PAGE 2 HERE -->
</div>
</div>
</div>
</div>
and to CSS:
#screen1 {
background-color: blue;
height: 900px;
}
#screen2 {
background-color: green;
height: 900px;
}
It's old school, but I did just recently did something like this using the "target" attribute inside the anchor tag. Open two browser windows, set the "display" one to full screen and the links on the first screen (the control screen) target the second browser window. For example:
<a target='songs' href='/freebird.html'>Freebird</a>
No programming needed.

I have found some spam links that are only visible on mobile devices, and I can't find where is the script that contains this spam links

So I have this problem only when I see the page on mobile devices! I tried to find the spam links through the computer but I can't find them anywhere. I think it's in the K2 Plugins but I don't know on which one. I'll paste some of the code here I've found with the spam links:
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="itemBody">
<!-- Plugins: BeforeDisplayContent -->
<div id="js-pc">
русский бизнес за границей<br>
записки туриста
</div>
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Plugins: AfterDisplayContent -->
<div id="js-pc">
обзоры музыкальных групп<br>
спортивный туризм
</div>
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
<!--End Item Rating -->
</div>
So these are the Russian spam links I can't delete.
A solution is:
1. Start search in all files of your website by the next keyoword: base64_decode
2. You must find something like the next:
<?php $mgp='PGRpdiBpZD0iaXQtc24iPjxhIGhyZWY9Imh0dHA6Ly9qb29tbGEtbWFzdGVyLm9yZy8iIHRhcmdldD0iX2JsYW5rIiB0aXRsZT0i0LrQsNC6INGB0L7Qt9C00LDRgtGMINGB0LDQudGCINC90LAgSm9vbWxhIDMiPtC60LDQuiDRgdC+0LfQtNCw0YLRjCDRgdCw0LnRgiDQvdCwIEpvb21sYSAzPC9hPjwvZGl2Pg=='; echo base64_decode($mgp);?>
The next symptom is: this string stand right from the base code
Delete this string carefully and enjoy :)
Hope this information will help you.
Probably these links are being generated through a jquery/js code and by media queries as well, this is why the reason they only appear on mobile devices. Perhaps if you dig on these plugin's code you'd find where this is being generated assuming it's on these plugins. Somewhere on your plugin's CSS code, must be something like this example:
#js-pc {
display:none;
}
#media (max-width: 600px){
#js-pc {
display:block;
}
}
the code above make the links only visible on screens smaller than 600px width,
but you can overwrite this action through your main CSS file as well, forcing this links to not be displayed with display:none !important;. It will be something like this:
#media (max-width: 600px){
#js-pc {
display:none !important;
}
}
The media query above depends on which size they are appearing but if it's only on mobile devices I think this will fix the problem.
Here's an example of what your website is showing right now, and this is your fix

WinJS Pivot Not Displaying correctly

I have a Windows Phone app using HTML5 and Javascript.
I am using WinJS.Utilities.empty(); to clear the DIV element and then WinJS.UI.Pages.render(); to load pages in to the same DIV:
On one of the pages that is loaded in, I am trying to use a Pivot Control, I am using it declaritively like this:
<div id="MyAccountPivot" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'MyAccount'}">
<div data-win-control="WinJS.UI.PivotItem"
data-win-options="{ header: 'current' }">
<div id="current">
Lorum Ipsum...
</div>
</div>
</div>
When the page is loaded in, the Pivot control loads and renders, and the PivotItem headers render correctly. But when the content has been rendered, it is not visible. I have used the DOM explorer in Visual Studio to interrogate the markup and styling to find the issue. It appears that the container DIV elements for the PivotItem contents are out of place and are hidden behind the DIV that contains the PivotItem headers...
When I have tried using this markup in the parent page (rendered without using the WinJS.UI.Pages.render();) it works exactly as expected.
I have also tried creating the Pivot and its Items programmatically, but this produces the same results.
Any help would be greatly appreciated.
Getting me same issue while showing content without template, make some changes in css and it's works for me.
HTML
<div class="myPivot">
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'one' }">
-- item content---
</div>
</div>
</div>
CSS
.myPivot {
}
.myPivot div.win-pivot-item {
left:0px !important;
visibility: visible;
width:100%;
}
.myPivot .win-pivot .win-pivot-surface {
width: 100%;
position: fixed;
}

Parallax scrolling in Safari on iOS

As far as I understand it is not possible to execute JS whilst scrolling. All working iOS parallax scroll scripts that it know of recreate the native scrolling effect in js to achieve this eg. Iscroll
How then have apple achieved it on their own website.
Look at the blurred background images as you scroll on this page.
http://www.apple.com/ios/carplay/
It is possible to create a CSS purely on iOS devices without JS. There are some great examples such as Keith Clark's you can find here
However i personally found that this did not have the desired effect on iOS devices. As i expected the page to continue to scroll after i have released my touch, but it seems this didn't happen - almost as though the page was 'sticky'. I found this was the case with a number of Pure CSS solutions i came across.
I am usually working with Bootstrap so the following example is what i use to produce the parallax effect i was after.
In your CSS add this:
#fixedbg {
background:url(../img/yourparallax-image.jpg) no-repeat center center;
background-size:cover;
height:100%;
position:fixed !important;
width:100%;
z-index:-2;
top:0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
}
Then in your html add this:
<div id="fixedbg"></div>
<header id="top" class="header">
</header>
<section id="article" class="article">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-12">
<p class="text">Example text content goes here</p>
</div>
</div>
</div>
</section>
The #fixedbg calls the correct image from the CSS and then the header section sets up my full page image that i want to run the parallax effect on.
I usually place the #fixedbg css insude media queries for various device screen sizes as i like to use different ones depending on the content.
Please note this is a simple parallax and to date i have not 'stacked' with multiples on the same page, but between the above code and that sampled in Keith Clark's example above, this should provide a good starting point.

Scrolling the page causes issues to buttons

I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.

Categories

Resources