I can't seem to get my header to display on the page where the jquery-steps form are displayed. And this only happens on certain mobile browser such as the 360Browser(v1.1.0) and also the WeChat Built In browser.
I don't have any clue what might be wrong here so any help guys?
My test website is at m.demo.rsi.sg. To get to the page, simply select any items (total checkout value must be > 40) and then proceed to checkout and click sign up.
Am nearly going bonkers over this - any help would be appreciated, thanks!
<div class="header">
<div class="logo"></div><div class="menu"></div>
</div>
<style>
.header{position:fixed;
top:0;
z-index:2;
}
</style>
Related
When I test this page: https://affordablehousepaintingrenosparks.com/get-an-estimate/ on a mobile device (iPad Portrait or lower) my contact form does not allow me to enter any data into the final section (Tell us a little about your project...). I have checked the CSS to see if anything is overlapping and have looked at the code but can't find anything wrong with it.
Here is a screencast of the problem: https://www.loom.com/share/cacb1b51d7674d95ab08246ec1a81760
I would like to be able to enter text into this field. Any help would be appreciated.
Add a clear: both to the last <p class="col-md-12"> which wraps the submit button. Then it works! :)
I have a very strange problem, i have a div with an anchor tag with an id in it, when i click on the anchor tag, it doesnt open the link in it, but if i right click it and open it in a new tab, it works perfectly, do you guys know why is that ?
here is my exemple :
<div class="toto">
<a id="tutu" href="https://www.google.com" >my cocorico</a>
<div>
cocorico
</div>
</div>
here is a jsfiddle: https://jsfiddle.net/mog8zf3t/5/
This issue is caused by using jsfiddle rather than your html.
The code runs in an iframe on jsfiddle and Google have specifically blocked you from being able to do this by setting 'X-Frame-Options' to 'sameorigin'
Either try running the code on your local machine or pick a different website which will allow you to display it in an iframe.
function go_to_href(href){
window.open(href,'_blank')
}
.toto{
background: grey;
color: white;
text-align: center;
font-size: 1em;
}
.toto a {
display:block;
}
<div class="toto" onClick="go_to_href('https://www.google.com')">
<a id="tutu" href="">my cocorico</a>
<div class="eps-Chip-content">
cocorico
</div>
</div>
Thank you all for your answers, i found the problem, and it was in my js, i had a event.preventDefault(); on the click of the anchor tag, and that's why it wasn't working. take it of and it works perfectly.
here is where i found my answer : https://api.jquery.com/event.preventdefault/
The reason is cause of frames and iframes. Two things.1 is same thing as #hairmot said. sameorigin.
But second reason is when you have your main site an https site like https://jsfiddle.net/mog8zf3t/7/ you cant have http links there. So you cant for example open an http://jsfiddle.net link on that page. So in real time usage you should consider both.
So in order to observe the reason this is what you can do. open inspect element on your browser go to console section. try to click on link and check the error.
for the fiddlejs code you provide the error is cause of same origin
problem ( the link you provide is not from same origin as the main
site).
In my case I had data-toggle="buttons" in the surrounding <div> which I discovered after a few frustrating hours. Posting as an answer as it may be helpful for someone.
In the footer of the website, I would like to include social widgets. Facebook one is working just fine, Tripadvisor comes with a many lines of code and and is not really styled, jumps off my footer etc.
How do I eventually style the widget which is not styled? If I change anything in the code, a message:
"Please check the TripAdvisor code and install again."
This is their code
<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
<ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
<a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393- Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
<img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
</a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&uniq=675&locationId=6883393&color=green&size=rect&lang=en_US&langversion=2"></script>
The main problem is that it jumps out of the footer and does not stay in line like I would like to.
Screenshot:
The whole site to check is : http://ilovesegway.com
The best way for you to get it exactly like you want is for you to open your site in your browser of choice and tinker with the styling in the browsers developer tools.
I went in and slightly modified the parent div. I gave it a display: inline-block
<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...
That wasn't enough so I also changed two children divs to inherit the vertical-align styles.
<div class="socialWidgetContainer" had a style of display: table-cell which I removed.
<div class="socialWidget" style="vertical-align: inherit;"
I assume the second modification was generated content by trip advisor, but you should still be able to style this via a .css file or even some JavaScript.
I did all this through the chrome dev tools.
Have you tried using an iframe, similar to what the Facebook widget uses? That way, you could put the TripAdvisor code in a separate HTML fragment and let the iframe dictate where you want the widget to go. That way, you're not fighting against whatever styles are being pushed at you from TripAdvisor's scripts.
<!-- Facebook widget -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FI-Love-Segway%2F540468152732697&width=100&layout=button&action=like&show_faces=false&share=false&height=35&appId=487866241269315" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;padding-top:15px;" allowTransparency="true"></iframe>
<!-- Trip Advisor widget; add whatever styles or parameters you need -->
<iframe src="YOURSITE/tripaddvisor.php"></iframe>
You can still apply css rules to the included content. Consider making #TA_socialButtonBubbles675 position:relative and moving it manually to where you would like it to appear. I had some luck with:
#TA_socialButtonBubbles675
{
position: relative;
top: -116px;
left: 360px;
}
EDIT: First of all, sorry for not pasting the link directly. Secondly, thank you ALL for the help, everything works now. Thank you Manoz especially for pasting my code and fixing it. This website is magical, I've been trying (and failing) to make my code work all day yesterday, so I thought to give this website a try and got much more help than I expected. THANK YOU!!
I'm an amateur programmer in school, having a lot of trouble with div id. Here is a link of how my code looks like:
http://convert.neevia.com/docs/e7416408-ff15-4c01-954c-603bfd1ce941/test11.jpg
The problem I'm encountering here is that anything from #title to #footer is not showing up in the browser. In other words, it is not linking any id (such as #title) to the HTML code .
I would really, really appreciate some help. Thank you very much.
<!Doctype html>
<html>
<body>
<head>
<style type="text/css">
div{
border:solid 2px;
margin:5px;
padding:5px;
color:green;
}
#title
{
height:150px;
}
#menu
{
width:150px;
float:left;
height:450px;
}
#mainarea
{
margin-left:180px;
margin-top:10px;
}
#content
{
}
#footer
{
height:30px;
text-align:right;
}
</style>
</head>
<body>
<div id="title">
<p>The title</p>
</div>
<div id="menu">
<p>the menu</p>
</div>
<div id="mainarea">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html
Changes are being appeared when I change anything from #menu to #footer in CSS.
If Tony Barnes's idea didn't work (which you should try), you might just not be saving the file before you refresh your browser.
I see nothing wrong with your code. Until you post it in your question (https://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks) I'm not going to try it out, but it could be a caching problem. Ctrl+Shift+R (Win) Cmd+Shift+R (Mac) to refresh the page with a new cache. I noticed that you're using Dreamweaver. Don't. Especially do not use it's preview option. There are many better (free) text editors.
Caching probably isn't an issue though because it's all inline CSS.
The issue for me, is just that there is a cache file that is present in the browser. I had the same issue, so I had to remove that using CTRL + F5.
Otherwise, what does the red line means in the code? Does your text editors shows the error when you hover over to it? I am sure it would help you.
Third thing would be, to check the Html Inspector from your browser. To check that press F12, I am sure you will get the styled properties there, this way you will get to know which properties are being applied.
If the updated ones are not present in the Browser, then the cache is the issue. If they are being overridden then you will also know how!
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb