I have the following problem, one of our customers wants to have a certain animated graphic on one of their pages.
graphic
link
It's basically a metal nut that u can turn with your mouse wheel to see what services they offer regarding production.
On the old website they had, it implemented like this
Nicely, fullscreen with scrolling functionality.
However, when I try to use an iframe to implement the graphic it looks like this (scroll to the bottom to see the graphic)
The code I use for the iframe is the following:
<iframe class="fuenfeck" src="https://sinerefl.sirv.com/qualicut/qualicut.spin">
</iframe>
I already tried to add width attribute but it only makes the container larger, not the graphic. I'm new to the whole iframe stuff, so I really need your help =)
Thanks and regards!
If you observe their css you will find somthing like that, that is useful for the iframe to be adaptative :
.responsive-iframe {
position: relative;
width: 100%;
padding-bottom: 62.5%;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="responsive-iframe"><iframe class="fuenfeck" src="https://sinerefl.sirv.com/qualicut/qualicut.spin">
</iframe>
</div>
any particular reason you want to use an iFrame? A much better way of embedding a Sirv Spin is to follow these instructions - https://sirv.com/help/articles/sirv-spin/#embed-a-360-spin
<script src="https://scripts.sirv.com/sirv.js"></script>
<div class="Sirv" data-src="https://sinerefl.sirv.com/qualicut/qualicut.spin"></div>
There's also a WordPress plugin - https://wordpress.org/plugins/sirv/ which is Divi compatible
Related
for my portfolio site, I would like to implement some CSS code that would allow me to control the variables for dynamically scaling images on my Blogger. http://www.bryan3d.com
This means that as you manipulate your window via resizing, the scaling of the images (hosted by imgur) would be resized on the fly.
A working example of this functionality can be seen here, though the user is using Squarespace: http://jasonlavoie.net/personal/#/deusudk-environmentart/
Is there something I can implement to have the same functionality through blogger?
Please see my answer : How do I make an html image responsive?
Add this in you'r css file :
img {
width: 100%;
height: auto;
}
this will affect all img elements. to be more specific, you can use a specific id like :
#headerhj img {
width: 100%;
height: auto;
}
see : http://www.w3schools.com/css/css_rwd_images.asp
Is it possible to make videos in WordPress 4.2.x responsive using the oEmbed shortcode? If not, are there better solutions than having to use some outdated plugin? I can hardly imagine that WordPress 4.1 and higher cannot place responsive content out-of-the-box since it has become so mobile-friendly!
I have searched and searched but have found nothing so far ... probably just not using the right search terms. I can hardly imagine that WordPress 4.1 and higher cannot place responsive content out-of-the-box since it has become so mobile-friendly!
This may or may not answer your question, but I've just tried something that works by installing a plugin called Advanced Responsive Video Embedder and adding the following css:
.embed-youtube {
position: relative;
width: 100%;
height: 0;
padding-bottom: 60%;
}
.embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The Plug-in also has some really good options, like editing paramaters of the embed like so: wmode=transparent iv_load_policy=3 modestbranding=1 rel=0 autohide=1
P.S.: .embed-youtube is the class name of the container div engendered by the plug-in..
Hope that helps!
You can use the plugin called 'FitVids for WordPress' to make your youtube videos responsive.
You can use it like this:
<div id="youtubevid">
[youtube R-S9vXFVOnU]
</div>
Now you have to add this CSS selector to make it responsive using the plugin. Go to Appearance->FitVids and enter the id of the selector and save changes: jQuery("#youtubevid").fitVids();
I wrote a plugin called "Responsive Media". It makes embedded media by oEmbed responsive out of the box.
https://wordpress.org/plugins/responsive-media/
I'm working with a project where I need to have a scrollable div element display the bottom when the page loads. This means that the user could scroll upward to see the rest of the content. The only way I could think of doing this would be to have the div autoscroll to the bottom on page load. But since load time is important for this project, I'd like to find another solution. Is there any other way to do this, preferably in something like css? Thanks!
You can use javascript to get this effect. It's fast, so you won't have to worry about load times:
var yourDiv = document.getElementById('yourDivId');
yourDiv.scrollTop = yourDiv.scrollHeight;
There are also numerous ways to implement this using jQuery. Here's a great blog post on the subject:
jQuery Scroll To
I'm not sure to understand well what you need, but maybe something like that:
#bottomDiv{
position:fixed;
bottom:0;
}
There is no javascript tag so what about hide element until css file is not downloaded (but this work only for 1st time, then will be css file cached)
<div id="bottom" style="display: none;"></div>
CSS
#bottom {
display: block !important;
position: fixed;
bottom: 0;
}
I am having a problem with the onestepcheckout login popup, its working fine in normal browser in a computer but while trying to login using an iPhone the login popup gets hidden and cannot see it.
I tried to change the css and i find out that it has an inline css and what ever i try to put in there gets overwritten by the inline css, and i cannot seem to find how the inline css is being put in that block all i see is :
login_popup.phtml
<div id="onestepcheckout-login-popup" style="display: none;">
but when i see it in a firefox browser through a firebug it gives me
<div id="onestepcheckout-login-popup" style="margin: 0px; position: absolute; z-index: 9999; top: 264px; left: 555px;">
I need to change the css so that it will be visible on the iPhone also , but i am having difficulty as i cannot find how the inline css is being put in there, anybody who encountered this problem with onestepcheckout or anybody, any suggestions or solutions will be greatly appreciated and thanked for.
Thank you
I use NextGEN Player Template plugin, It is great plugin, but it shows portrait pictures in landscape mode. In other words, plugin takes the central part of the image and shows it as landscape orientation image.
And it is not the nextgen gallery issue, because this another plugin works with nextgen gallery too, but as we can see on third screenshot, it shows portrait images in portrait orientation. But this plugin has another problems, so I can't use it.
So, I need to see portrait orientation pictures in portrait orientation using NextGEN Player Template plugin. Cam anyone help?!
Answer for last comment with picture:
My advice is to upload or see an example of the plugin. Then look at the source code with either chrome's or fire foxes "Inspector", they allow you to see each element and what they do with the page. Then find the DIV that is containing the image or Style that is editing the image itself. And then edit it accordingly. Though since this is a plugin there is probably a piece code that applies this to each div so you will need to track that back also. Or find someone who is willing to look inside all of your code. but perhaps research a little first and look into your code.
Ok i looked through your code there.
Try changing this
$('div.gv_panel').live('click', function() {
$.fancybox({
autoScale: true,
to false.
Also these things apply to changing the image.
<div id="ngg_player_bg_changer" class="ngg-player-bg-changer" style="display: block;">
<div class="gv_panel" style="width: 564px; height: 400px; left: 0px;"><img style="visibility: visible; width: 601.504px; height: 400px; top: 0px; left: -19px; display: inline;" src="http://piotr-tokarczyk.pl/wp-content/gallery/player-1-2/g7.jpg"></img></div>
Holds all the different images i think
Hope this helps :)
As the plugin is being actively developed, I would certainly suggest posting in http://wordpress.org/support/plugin/nextgen-player-template as Piotr seems to respond fairly quickly.