Html href window size

Change Css ‘href’ by javascript by browser size change

Been trying to apply a javascript that will change the Css href if the browser window or device is a different size. I have scoured here and tested all of them with no results. here is my code so far. AND YES I TRIED MEDIA QUERIES AND THEY DON’T WORK media queries i tried to use:

You might want to post the media queries you tried to use (yes, I read the comments and the YELLING IN THE QUESTION). Unless most of the web is hallucinating, they do work, and are exactly the right tool for this job.

So the thousands of websites that are using media queries today are just not working? What do you mean they don’t work? Of course they do. You are doing something wrong. Show us how you tried to use media queries.

Maybe take a look at this question: stackoverflow.com/questions/5680657/adding-css-file-with-jquery Also, do not be discouraged by the trolling above. Improve your question and hopefully someone will help 🙂

Источник

Открытие нового окна window.open() или одной страницы внутри другой с помощью iframe | JavaScript

Правильный скрипт popup, сделанный с помощью iframe

Считаю, что этот вариант более удачный по сравнению с модальным окном только на CSS, так как дополнительный HTML подгружается после нажатия на кнопку или другого действия посетителя сайта Страница родителя Открыть   Вложенная страница, вернее страница, которая будет открыта внутри iframe Закрыть   window.parent даёт доступ к ближайшему родительскому окну из iframe или object, позволяет изменять его элементы, если домены одинаковы window.top даёт доступ к верхнему iframe в иерархии объектов, позволяет изменять его элементы, если домены одинаковы

Изменить содержимое iframe

Заменить фон   iframe.contentWindow позволяет изменять содержимое фрейма, если домены одинаковы. В том числе прокручивать к нужному месту документ в фрейме postMessage позволяет делать тоже самое и с разными доменами (есть пример использования)

Источник

Open a Window with Full Size Unscaled Image

For the gallery section of this site, I wanted people to have the ability to see the screenshot at its original size. Due to the fluid nature of this site, it’s fairly common for the screenshot to be scaled down to fit into its column. So I put together this little solution. My plan is to open a window the exact size needed to fit the image. Quick, easy, and perfectly good UX in my opinion. All you have to do is this:

Actually it’s a bit more complex than that. We need to pass in a bunch of parameters to get the window we want. Namely, the kind with as little chrome as possible. A top bar with a close button and that’s about it.

window.open(path-to-image, null, 'height=y, width=x, toolbar=0, location=0, status=0, scrollbars=0, resizeable=0');

Example: The tricky part is figuring out just exactly what height and width values to pass. You can’t just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var img = document.getElementById('screenshot'); img.width; // current size, not natural size img.height; // current size, not natural size

To get the natural size, we’ll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it’s untainted by CSS on the page.

var img = document.getElementById('screenshot'); var magicEtherImage = new Image(); magicEtherImage.src = img.src; var padding = 20; // little buffer to prevent forced scrollbars // Values to use when opening window var winWidth = magicEtherImage.width + padding; var winHeight = magicEtherImage.height + padding;

$(".view-full-size").click(function() < var mainScreenshot = $("#main-screenshot"); var theImage = new Image(); theImage.src = mainScreenshot.attr("src"); var winWidth = theImage.width + 20; var winHeight = theImage.height + 20; window.open(this.href, null, 'height=' + winHeight + ', width=' + winWidth + ', toolbar=0, location=0, status=0, scrollbars=0, resizable=0'); return false; >);

You can see it in action on single gallery pages like this. Obviously it doesn’t do much on mobile, so I just remove the button with a media query.

Источник

Opening new window in HTML for target=»_blank»

In Firefox it opens in a new tab instead because the majority of users hate popup windows. Please bear this in mind before opening a popup.

3 Answers 3

To open in a new windows with dimensions and everything, you will need to call a JavaScript function, as target=»_blank» won’t let you adjust sizes. An example would be:

@mplacona I prefer javascript:; , because if you have # and hit return on the keyboard the page will not get refreshed but with this works like a charm

thanks for that @bobince. Besides your harsh -1, I guess I learned something off you, and made my example better.

You can’t influence neither type (tab/window) nor dimensions that way. You’ll have to use JavaScript’s window.open() for that.

You don’t have that kind of control with a bare a tag. But you can hook up the tag’s onclick handler to call window.open(. ) with the right parameters. See here for examples: https://developer.mozilla.org/En/DOM/Window.open

I still don’t think you can force window over tab directly though— that depends on the browser and the user’s settings.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.21.43541

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

How to Load Different Home Page according to screen size

I want to load different home page according screen size. Can anyone help about it ? For Example, for screen-size < 960 px I want to display default landing page as index1.html and for screen-size >960 px I want to display default landing page as index2.html Thanks in advance.

As suggested, I would do this with a script based upon a media query. I recommend Modernizr as a lightweight solution if you plan on making many queries or changing assets based upon queries. That said, while I don’t know what problem you’re attempting to solve, I believe the method of solution goes against the principles of the responsive web. What happens when a user goes from one media query to another and back? How are you handling pages redirecting? Consider using blocks that can be repurposed as the medium your audience changes. Hope this helps!

3 Answers 3

I know this was asked and answered a while ago, but I think the solution I’m adding is better than the accepted answer as it involves no reloading and works on resizing. Define two CSS classes, .HideOnMobile and .ShowOnMobile and use them in two top level DIV elements.

Then use media queries to set the display value of those two classes to none or initial, to display or hide each DIV according to the screen width.

Update: the author of the accepted answer has kindly commented below that they believe this answer is best at solving the problem behind the question.

@media (max-width: 575.98px) < .HideOnMobile < display: none; >.ShowOnMobile < display: initial; >> @media (min-width: 576px) < .HideOnMobile < display: initial; >.ShowOnMobile < display: none; >>

 
MOBILE content
 
DESKTOP content
 

Источник