I bought a responsive website template that I'm trying to edit. I would like to put a search box that I get from another affiliate site, using <script> code, this search box is having a set width and height and it is not responsive.
My website looks fine in desktop but not in mobile version. How can I add IF statement to my html file to replace the <script> for search box with another one based on screen size of viewer.
simply I want to replace <script .....></script> with another one if the visitor is browsing from mobile device.
Thanks
You're going to need a way to see whether you're browsing through a website or not. Wurfle (PHP) is a good way to achieve this.
If if were just graphical, you could also alter the styles using the "media" attributes.
Related
I'm trying to build a page where the admin can do multiple tasks from within.
For example after the admin logs in, he will click on a button to either manage the users or view the reports, but the result the result is extremely small view of the page while I'd like the loaded page to fill the entire bottom of the screen:
here is my code:
I looked for explanation on the web but couldn't find any.
Thanks.
The size of the element you're looking at is probably the default size for an object in that browser.
You're putting your file/data directly into an object with type text/html; to be honest, I'd suggest looking into a bit more background information on how to display data on the web using tables and/or grids without actually dumping pure file-info into the client-window.
I fixed the problem by using iframe. Thanks
Is there any JS library that can help load different html files based on the dimensions? I guess this would be a mixture of responsive and adaptive, not sure if that's kosher.
Basically I want the site to show a different top menu on a phone.
Instead of arguing with you about how you're approaching the problem, I'll say that yes, there are JS libraries that could help you out.
There's a good writeup about enquire.js at http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/. This one lets you set callbacks for breakpoints.
Another you might be interested in is breakpoints.js which, similarly, will let you write jQuery to be executed at certain breakpoints.
Is there a reason you'd want to avoid doing this with a purely responsive design? You could include both a phone navigation and desktop navigation, then hide/show via CSS based on browser dimensions.
I agree with #Kolink's comment..
But if you want to do this anyway I would suggest enquire.js.
You will be able to do something like this:
enquire
.register("screen and (max-width:50em)", function() {
// Load top menu content 1 via AJAX.
// Show content menu 1
})
.register("screen and (max-width:40em)", function() {
// Load top menu content 2 via AJAX.
// Show content menu 2
});
The ideal situation is to load just an HTML and change the CSS rules applied to it through responsive design.
If you want to have different HTML versions, then you should redirect to another URL if the request comes from a mobile browser. Look at the following link with different recipes depending on your platform:
http://detectmobilebrowsers.com/
I've been tasked with trying to add a message to the Product Compare Page which will appear if the customer has, by some stroke of stupidity, been able to access the page when there are no products to compare
now i understand there a <script type="text/javascript">window.close();</script> already in there however it seems like it doesn't work if you open a new window and type in the URL (the equivalent to bookmarking the page, how i figure is that if i put this message above the <script type="text/javascript">window.close();</script> line, if the window doesn't close the customer will get the message.
Now that part is easy enough, the hard part is the second part to my task and that's allowing this text to be changeable though the blackened much like how you can change the Logo Image Alt in System > Configuration > Design > Header.
we already have some new section in System > Configuration thanks to some custom modules however i don't want to have to create an entire module just so a department we can't trust to edited the page and not stuff it up in the process can change one line of text
So is there a way to add customizable Text to a Magento Page
You could change the javascript to window.location = '/sorry-page'; or something like that and creat "sorry-page` as a CMS page. Otherwise you will need a custom module.
Here's what I have for now :
http://jsfiddle.net/W29Wk/
(I'm using Dreamweaver with the Spry Tabbed panels)
I'd like to make something similar to JSFiddle, when you share the script...
What I need is to be able to write my HTML code in the first tab, CSS in the second and Javascript in the third one. Once I'm done, I go in the "RESULT" tab and it renders my code into HTML.
The RESULT tab does not need to be a TextArea, it can be a DIV or a iFrame, as long as it is the same size of the other TextArea.
Thanks a lot!
The result needs to be an iFrame. Jeffrey Way explained it very good in this screencast on nettuts+: How to Inject Custom HTML and CSS into an iframe
You can make the tabs tabs yourself (or just google it).
But why are you making a second tinkerbin?
A client wants a merch shop on their site, and has set one up. I could iFrame in the whole page to the merch page, but frankly the merch site is an eyesore, and their site has a very particular feel to it. So I'm considering using an AJAX GET to grab the whole page, then javascript to display only the div with the merchandise in it. However, there are a lot of javascript includes (etc) on the merch site that I'd need to make sure are still present for the div to work correctly.
Any feeling on if this would work or not? Would the displayed div take its stylesheet and scripts from the AJAX'd page? Can I put the div in an iframe instead?
Opinions?
It sounds like an ugly solution. Isn't it better to do this serverside instead, for example let a PHP script read in the page and to whatever magic it takes to display it?
Using AJAX to load entire pages is ugly for a couple of reasons, including:
It breaks the URLs (can be worked around but requires extra work)
It's hard for search engines to crawl your site
It breaks some GUI elements in the browser, such as loading visualisations
looks like you can use jquery load function http://docs.jquery.com/Ajax/load