Odd behavior of twitter button on devices not from a specific country - html

I have searched a lot, but I cannot find a similar problem on the net. Or probably, I have my keywords wrong, but here's the problem:
I created a website which has a twitter twit button, and it works in all browsers, in all languages (that we've checked). So here's the predicament, we have foreign bought laptops and when they click on this button, instead of the usual twitter pop-up window allowing you to twit the page content, it gives a "Page not found" text on the pop-up.
I have declared UTF-8, i have set the html lang document to that specific language, but it's not working.
Here's the code for the button:
https://twitter.com/share?url=google.com&text=【CNE1%205周年記念】特別サイトをシェアして超豪華特典付きの1週間留学を当てよう!%20詳細はコチラ:http://www.cne1jp.com/campaign/%20@CNE1Japan%20#cne1'>
<div class="twit">
<div class="twitlogo">
<img src="images/twitterLogo.png" />
</div>
<div class="twitcon">
<!-- <p>Twit the love on Twitter!</p> -->
<!-- <p>Twitterでつぶやく!</p> -->
<div class="twc-t">
<div class="twc-tt">
Twitterで<br>
ツイート!
</div>
</div>
</div>
</div>
</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='//platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>
Would greatly appreciate any insight on this. Thank you in advance!

Related

Images do not show on Desktop, only mobile

I have a website that has multiple retailer images showing, and these are affiliate links. The issue I have is when I view on a desktop, even with cleared cache, cookies, and other browsers, I can see all retailer images, however when I am speaking with users of my site, they can not see images on desktop only mobile.
The website is www.yourshoppingcentre.co.uk
I have a used the same code through the site to make it easier to add more retailers in the future, and an example can be found here:
<div class="card" style="border: None; padding-top: 5px;">
<div class="thumbnail center well well-small text-center">
<!-- START ADVERTISER: Kelsey Media from awin.com -->
<a rel="sponsored" href="https://www.awin1.com/cread.php?s=3105047&v=19854&q=433993&r=1052665" target="blank">
<img src="images/advertisers/kelsey_media.jpg" >
</a>
<!-- END ADVERTISER: Kelsey Media from awin.com -->
<div class="card-body">
<div class="span12">
<div class="thumbnail center well well-small text-center">
<!-- <button class="btn btn-primary mb-2">Add to Favourites!</button> -->
</div>
</div>
</div>
</div>
</div>
One user has shown me a console screenshot where it shows the images have CSS of Display: None !important;
However again when inspecting the site myself I do not see this CSS and have no concept of how they are seeing this.
So I am guess I am asking a couple of things here, is this issue replicable, and secondly, if so, how to solve, as it is affects a subset and not all users is my understanding.
Appreciate any help!
Thanks!
It's blocked by your adblock probably.
You can see that in your inspect tool :
The images are being blocked by an ad blocker on desktop. If your users disable their ad blocker, the images will show on desktop.
To resolve this, you might consider changing the URL you're using for those images.
Specifically, it seems that uBlock Origin doesn't like advertisers being in the image url.

Printable tab button

I'm currently stuck with some HTML code. On my website, I currently have 5 existing tabs but I wanted to make one clickable that redirects the user to a printable page that pops open the print menu specific to their browsing. I think I may be missing something in my HTML code. Underneath you can find a simplified version I extracted from one of my tabs:
<div class="tab-item">
<a class="tab-label text-center"><i class="icon-1-map"></i> Ligging</a>
<div class="tab-content">
<iframe src="<!--GOOGLE MAPS LINK-->" style="width:100%; height:400px; frameborder:0; border:0" allowfullscreen></iframe>
</div>
</div>
I wanted to implement something like this
<div class="tab-item">
<a href="../../print/k420-torhoutsesteenweg306.html">
<i class="icon-1-print"></i> Print deze pagina
</a>
</div>
The problem is, sometimes the tab doesn't even show up and if I change my code to the one underneath, it doesn't bring me to the linked page.
<div class="tab-item">
<a class="tab-label text-center" href="../../print/k420-torhoutsesteenweg306.html">
<i class="icon-1-print"></i> Print deze pagina
</a>
</div>
Can anybody help me?
If you'd like to see the full sourcecode, please click here
Thanks!
Welcome to StackOverflow.
1) To just open the print dialogue of the page upon loading, simply add this at the bottom of your HTML's <body> : <script>window.print()</script>
2) As for your disappearing code, please provide more information and/or link your CSS. Also, why are you using <i> on its own like that? <i> is to display text in italics
The information you provide is not enough to correct any issues.

How to view only one section in html

Can someone please help me with something. Im building a website and it includes html5. The thing that i dont understand is using the <section> function.
Preview
<section id="1">
click her to go to section 2
</section>
this is the section 2
<section id="2">
<!-- html source where <p> and etc will go -->
</section> Closed Section
The section above is what i only want to be seen in the webpage instead of showing section 2. Its pretty much like having many pages in 1 just without reloading or scrolling down.
In my css i have scroll bar locked, and ive tried many things to make that section to only be show on the webpage. Im kindof learning new html5 functions and im experiencing the things now
http://jsfiddle.net/K2w49/
I think you're a bit confused about what a function is. <section> is an HTML5 element. No function involved.
If you're talking about having a seamless fullscreen interface (i.e. they never scroll, new stuff just loads in similar to Flash applications), then it doesn't really matter what html container you use (i.e. div, section, aside)
For example..
<div class="wrapper">
<section id="slide-1" class="slide">
<!-- content -->
</section>
<section id="slide-2" class="slide">
<!-- content -->
</section>
</div>
Then max the wrapper and attach an absolute or fixed value to it...
Here's what you asked for: http://jsfiddle.net/K2w49/7/
If you're going to have a lot of content, you should use AJAX to load as needed and change the script around a little.

What can I do to fix this Tumblr Custom HTML code for header links?

I'm trying to edit Tumblr Custom HTML to add another header link to my Tumblr theme.
I have searched stackoverflow for "Tumblr" "Custom HTML" "block:Pages" and "link" but have not found the bug in my code that's leading to the following problem:
I copy and pasted
<li>{lang:Archive}</li>
I then changed
"/archive/"
to
"/submit/"
and
{lang:Archive}
to
{lang:Submit a Post}
I end up with a webpage with a header link that, when clicked on, takes you to the correct page, but there is no text for that link. Please see a screenshot of the problem and the website I'm trying to fix.
I've included a code snippet so that you can help me troubleshoot. Thank you!
<div class="container">
<div id="headerwrap">
<div class="span-18" id="header">
<div class="span-18 last"><ul>
<li>{Title}</li>
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{block:HasPages}
<li>{lang:Random post}</li>
<li>{lang:Submit a Post}</li>
<li>{lang:Archive}</li>
</ul></div>
</div></div>
{block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
<div class="span-24"><div class="span-5 blue_striped"> </div><div class="span-18 last"><p>{Description}</p></div></div>
<hr/>
The {lang:} tag lets you specify an English string that should be displayed in the user's language, but it only works with a predefined set of strings that can be found here:
http://www.tumblr.com/docs/en/localizing_themes
You can "request a string be added", but I have no idea how long that would take. Best would probably be to drop the {lang:} wrapper and just include the text directly:
<li>Submit a Post</li>
The string won't be localized for non-English users, but oh well!

DNN MobiNuke Module Empty Div Tag Issue

I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.