October 12, 2016 at 08:10 UTC - Views: 75 #19641
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.
I am using weaver extreme with all the extreme plugins installed
Thank You!!October 12, 2016 at 16:52 UTC - Views: 8 #31106
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 mobileOctober 13, 2016 at 03:29 UTC - Views: 26 #31107
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.October 13, 2016 at 05:28 UTC - Views: 18 #31108
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.October 13, 2016 at 19:34 UTC - Views: 17 #31109
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.October 13, 2016 at 20:51 UTC - Views: 17 #31110
“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]October 13, 2016 at 22:22 UTC - Views: 7 #31111
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?
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?October 13, 2016 at 22:23 UTC - Views: 7 #31112
oh maybe i need the hide shortcode as well?October 13, 2016 at 22:31 UTC - Views: 19 #31113
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.
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…)October 13, 2016 at 22:38 UTC - Views: 16 #31114
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]October 13, 2016 at 22:44 UTC - Views: 19 #31115
I never said to do that???
You do not need to (should not) use both show_if and Hide_if.
[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.October 13, 2016 at 22:55 UTC - Views: 8 #31116
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.October 13, 2016 at 23:05 UTC - Views: 6 #31117
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.October 13, 2016 at 23:11 UTC - Views: 5 #31118
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…sorryOctober 14, 2016 at 03:30 UTC - Views: 6 #31119
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
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 insteadOctober 14, 2016 at 07:16 UTC - Views: 32 #31120
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.
- The forum ‘ Mobile View’ is closed to new topics and replies.