Different iframe url page in mobile – extreme

[nmb]

Hi

I am using the Iframe shortcode in the raw page template to show the ticketfly url http://thenickrocks.ticketfly.com/calendar on my page “tickets”.
I would like for page on mobile to open to the event listing view url http://thenickrocks.ticketfly.com/listing instead of the calendar view that i prefer it opening on for the desktop view. Is that doable with css somehow?

Also in mobile the external url i am linking to moves around a lot. i am assuming because i am using the iframe?? is there a way i can stabilize that on my mobile view. 

http://www.thenickrocks.com/

http://www.thenickrocks.com/tickets/

I am using weaver extreme with all the extreme plugins installed

Thank You!! 

[scrambler]

1- If I understand what you are saying, you can use the [show_if]shortcode to display one URL in desktop and a different on eon mobile.

Look at the shortcode help on the Add-Ons page. it would look something like

[show_if device='desktop']  The content for desktop [/show_if]

[show_if device='mobile']  The content for mobile [/show_if]

2- I have no idea what you mean by moves a lot, so you will need to elaborate and give precise scenario.

What I do see is that the calendar is not responsive, which does not look good on mobile

[nmb]

Thank You Scrambler!

So where do i put the code Do i use the page id in the [show_if device='mobile'] http://thenickrocks.ticketfly.com/listing [/show_if]

Their external site does seem to be responsive or (not move around). I feel it is moving around on the phone because i have it in the iframe so would just like to yes show if or redirect that “ticket” page to their url on mobile. – They have a link back to main site built in. 

This is not acting right on mobile http://www.thenickrocks.com/tickets/  (my page with the iframe)
But this looks fine on mobile to me http://thenickrocks.ticketfly.com – the actual external site. seems responsive

So i tried..
.page-id-2847 [show_if device='mobile'] http://thenickrocks.ticketfly.com/listing [/show_if]

i tried adding this in the Custom CSS box as well as in the per page css box and it did not work…

Do I need to put the show if shortcode inside the Iframe shortcode?
[weaver_iframe src=’http://thenickrocks.ticketfly.com/calendar’ height=2000 percent=100 style=”style”]
is what i am using for the page “Tickets” page on my site with the raw page template. 

[scrambler]

You did not understand what I said, the [show_if] shortcode is not about CSS

The shortcode goes around the content in the page editor, so it goes around the iframe shortcode (by the way do not include the unused options like style in the shortcode

[show_if device='mobile'] [weaver_iframe src=’http://thenickrocks.ticketfly.com/calendar’ height=2000 percent=100 ] [/show_if]

http://thenickrocks.ticketfly.com  is NOT responsive, just reduce your browser size and see that the content has a fixed width and gets cutoff.

May be they have a different version/page on mobile, but depending how they do that, you may not be getting it in the iframe.

[nmb]

Hi scrambler. Yes sorry they do have a different mobile version. I would just like to redirect the “ticket” page to their mobile version.

Am i correct in understanding now that i should just put two lines of code. one for desktop and one for mobile in the page editor?

I am going to keep trying these and studying…

[show_if device='desktop'] [weaver_iframe src=’http://thenickrocks.ticketfly.com/calendar’ height=2000 percent=100 ] [/show_if]

[show_if device='mobile'] http://thenickrocks.ticketfly.com [/show_if]

I think I don’t want the iframe on mobile just redirect to the mobile site. Is this doable?

Do i need that src= in the mobile. I feel like i have something wrong there. 

 

[scrambler]

“I think I don’t want the iframe on mobile just redirect to the mobile site. Is this doable?”
I don’t know any way to do that other than with the frame, so you do need both in the content area

[show_if device='desktop'] [weaver_iframe src=’http://thenickrocks.ticketfly.com/calendar’ height=2000 percent=100 ] [/show_if]

[show_if device='mobile'] [weaver_iframe src=’http://thenickrocks.ticketfly.com‘ height=2000 percent=100 ] [/show_if]

[nmb]

hmm. the two views now stack on top of each other on the page in desktop & mobile view. Is there an “important” i need to add or something maybe? 

http://www.thenickrocks.com/tickets/ 

Thank you again. I don’t want to keep bothering you on this. 

I will get a tech inquiry into this company. They just sent the skin with no instruction on the best practice to display it at our site. Maybe i am trying to be too smart trying to figure it out. They have not been too helpful thus far so was trying to avoid. 

one other thought though
***is it not possible to use the page id in the main custom css box to display one view on desktop and one view on mobile?

[nmb]

oh maybe i need the hide shortcode as well?

[scrambler]

No, this looks like a Bug.
Apparently the Raw template is not getting the CSS rules that are needed to make the show_if shortcode work.

@weaver, it appears that when using show_if shortcode in a raw template, the CSS for it is missing.

In the mean time, try switching your page template to Blank instead of Raw, and hide all the elements you don’t want with the page options (like hide entire header, hide entire footer…)

[nmb]

Very good i will try. Thank you.

I tried this but seemed to make an endless loop of the same page.

[show_if device='desktop'] [weaver_iframe src=’http://thenickrocks.ticketfly.com/calendar’ height=2000 percent=100 ] [/show_if]

[show_if device='mobile'] [weaver_iframe src=’http://thenickrocks.ticketfly.com’ height=2000 percent=100 ] [/show_if]

 [hide_if device='desktop'] [weaver_iframe src=’http://thenickrocks.ticketfly.com’ height=2000 percent=100 ]  [/hide_if]

 [hide_if device='mobile'] [weaver_iframe src=’http://thenickrocks.ticketfly.com/calendar’ height=2000 percent=100 ]  [/hide_if]

[scrambler]

I never said to do that???

You do not need to (should not) use both show_if and Hide_if.
Just use
[show_if device='desktop'] [weaver_iframe src=’http://thenickrocks.ticketfly.com/calendar’ height=2000 percent=100 ] [/show_if]

[show_if device='mobile'] [weaver_iframe src=’http://thenickrocks.ticketfly.com’ height=2000 percent=100 ] [/show_if]

Will show the first one on desktop and hide it on mobile, and show the second one on mobile and hide it on desktop.

[nmb]

Yes! the blank page works. this now displays the view i want in desktop and mobile!

Thank you so much. 

The mobile view however seems to still be not working as it does on their mobile site url. Specifically the sub pages of their site are not responsive in my page on mobile.  
There is nothing else i can use besides the iframe shortcode in mobile view?

This is usable for now though. 
Maybe i will try the iframe page template. 

Thanks so much for your time spent on this. You are very kind. 

[scrambler]

There is no way to control what the iframe does.

As I said, the url http://thenickrocks.ticketfly.com/ goes to a non responsive page that does not scale when reducing browser with, and an iframe linking to that will do the same

It is possible that when the URL is opened on mobile it switches to a different site but that the iframe is not able to detect the device it is running in.

[nmb]

Actually this is not moving around on mobile like it was at first and the sub pages are good too! maybe needed to adjust itself somehow. lol.

It is not displaying on my phone perfectly in the center though…a little is cut off the page on the right side. should i specify on mobile an iframe width rather than the 100%?

I know another question…sorry

[scrambler]

I dnt know how many time I have to say it…

The page http://thenickrocks.ticketfly.com/   has a rule inside on the html tag that says
min-width:1024px

So that page cannot scale down to the width of the mobile device.

there is nothing you can do about it as you cannot change the styling of the html inside an iframe.
You should check on a mobile device when you go to that URL, if the URL is changed to something else, if it is use that URL instead

[nmb]

Yes I do understand that.

Ticketfly is switching to a mobile site. That is not the content that shows on actual mobile. 
When you go to their url on mobile http://thenickrocks.ticketfly.com/  it just displays different mobile content.

When you go to my page on my site on mobile phone the page “Tickets” http://www.thenickrocks.com/tickets/ my acual website url,  where i am using the iframe to display the content, It is not displaying centered on my phone. It IS showing the mobile site they are using but the right side is just cutting off just a little bit. 

When I just reduce the size of my browser on my computer it doesn’t switch to the mobile content that it is switching to on mobile, it is only showing on my actual phone. But the content on the phone is not displaying exactly the same in the two different urls so i am asking if i do specify width or center somewhere in the shortcode i am using for mobile it may tighten it up like it is displaying when you view their actual url on mobile?
And i guess my thinking is since it is not actually using the content that needs to be min-width:1024px when on mobile (it is using different content altogether) perhaps there could be some rule that may may work perfectly. 

Or could i have a margin or padding set somewhere on my site that is making it not quite exactly like their external url is displaying on mobile…

Thanks! I really do appreciate all your time you have given me on this and your expertise on all of this stuff is frankly just amazing.

and it really is very workable the way it is…:-)

It’s just me going wonder what the difference is.

[Author]

Posts