Forum Replies Created
-
Posts
-
Kreisi,
The bug still exists. Just upgraded WordPress and also your latest version 3.0.5 with a test site I built a couple of months back.
It has the same exact behavior. Could be a cache issue after updating, but I’m doubting that. Cleared it out, but you never really know and I don’t really have any more time to invest in this issue. I would very much like to use the parallax effect, but it’s been an ongoing issue ever since you launched it. It has always flashed. FYI, we bought your template when sales hovered around 5K.I will tell you that the flashing of the pages in your template acts just like I described above and has not changed after your update. Not one iota. The behavior exhibits all the traits of a CSS issue that is trying to catch-up with your script. Or, vice versa. Since you’re relatively confident in your previous post that you have the dynamic Javascript tightened-up, I will steer you to this CSS code snippet below. It appears to be trying to assist with the dynamic rendering of the parallax, and to me (an outsider), this might be prone to timing issues when trying to get the drum beat and bass synced up in the song. One might lag behind the other in certain browsers as it scrolls.
.avia_desktop.js_active .av-parallax{opacity: 0;} .avia_desktop.js_active .active-parallax{opacity: 1;}The troublesome behavior looks just like what this code does. The underlaying BG color flashes white first and then flicks on when the opacity of the top image catches up a split second later.
I am fairly decent at finding bugs and their causes, but mostly when I control all the code. It takes patience and thorough knowledge of the underlying code base to debug issues. In your case, I know nothing about your Javascript that controls the parallax code. All I can offer is my opinion based on what I see on the screen and what I’ve experienced from coding websites. And the troublesome behavior reflects CSS trying to catch-up with dynamic content: Ie: the foreground element moving over the white background color giving a flash bulb effect to the white BG as the element first begins to move and starts shifting to an opacity value of 1. In our case, the parallax element holds an
<img>that is relatively large 1200px (+), so it could easily flash as the image dumps into view in the browser.If I am misunderstanding how all this stuff dances, my apologies.
I didn’t write the song.
Just merely giving you input.Good luck.
DonEDIT ADDED: P.S. One other thing I will tell you is that I’m tethered to the internet via wireless. 4G connection, with an average of 1-2mbs, sometimes faster off peak times at 4-6mbs. Because the parallax element is requesting an image that is large, perhaps for some strange reason this affects things? I don’t really know. One would think that it is cached in the browser once the image and site is fully loaded, but I thought I would throw this bit of technical info out there. Plus, 1-2mbs should have no problem keeping up once the site is fully loaded, even if for some odd reason your script was sending a separate parallax image request a second time (i highly doubt that’s the case). It’s probably a rabbit hole that has no merit exploring, but I wanted to share this info. Again, I didn’t write the song.
Thank you so much Josue. On this board, you, in particular are very helpful. We have our sub_menu lighting up half way down the page now and sticking to the top. It is hidden with display:none; for 50% of the scrolling height of our main page and then lights up midway. It allows for a less jarring effect than a shrinking NAV main_menu that distorts and shrinks the main logo. We inserted a smaller logo the proper pixel dimensions that is fixed position to the far left of the sub_menu once it lights up. The logo is clean because it isn’t scaled down by the shrinking DIV.
The sub_menus will also be very helpful for including confidential links on some pages through a conditional include by IP. Some pages on the site are reserved for only certain people to see and the second menu helps a lot.
You may want to pass along to Kriesi that Waypoints was just updated. If you update the version, I hope you folks will let people know.
This topic is resolved and can be closed.
Thanks again.
DonOkay, I have a perfect and wonderful solution for both you and I. Instead of suggesting I submit a feature request that may or may not be done, or may take six months to roll-out, how’a about this? So that we can get on with our day and the many hours and days we’ve already invested building things so far, please point me to the file(s) that control the popup window I’ve identified. This way, we can efficiently manage the beast we are building.
Please send me the information for the exact ALB Content element and the corresponding files on the back-end of Enfold that I’ve outlined clearly. Obviously, there are different settings for the Media/Image Popup windows based on which Content Element is selected from the ALB. So, it may require you re-reading my first post above to send me accurate file information. If you don’t know what files control the specific Content Element, please forward this thread to someone who does know. It very well could include both PHP, Javascript and/or a CSS files. The latter is not that important because we can probably figure that out by glancing over the PHP and Javascript files.
This solution will help both you and I and we can evaluate whether it warrants the time and effort to code the feature on our installation. And if you decide to tackle it yourself (which I would advise), then that will be a big plus for you (and your customers) because they (and we) won’t have to guess by trial and error what file we’ve selected in a mass of thumbnails that look very, very similar.
Thanks!
Kriesi,
It has happened to me every time I have used the parallax effect. It is intermittent as described in this thread. I have identical problems and I tend to do development in Firefox and have about 3 versions of Firefox on three separate boxes ranging from notebooks to 42 inch monitors. The problem occurs in all of them. It is not a browser version issue in Firefox because I’ve got ’em young to old. I quit using Parallax and just use a Fixed position color background instead which gives a similar effect.My hunch is your issue is the complicated Enfold CSS which is mostly inside your brain and not in mine because you authored it. So, I haven’t dived in to try and fix it. Your CSS is complicated and I’m a guy that knows CSS pretty well. I think the problem occurs by using a combination of various Enfold elements above and below a parallax element, but I can’t put my finger on which combination it is from memory. It appears to me that the CSS doesn’t keep up with the Javascript, but that’s merely a guess based on what I see happen on screen. The hiccup happens quick. Only a flash for a split second where the background peeks through. I have tried matching the underlaying root level bg colors and everything in between all the way up to the parallax element, but that didn’t really mitigate the problem. It still is chunky performance. If it is any help, it happened a lot more often to me using Firefox (Windows OS) than what mantisjitsu describes. Mine was pretty darn consistent. Enough to be too annoying to use in a live site because even the basic web surfer would be wondering what’s going on.
I can’t send you links because I long ago tabled using the effect. FYI, parallax also has problems in mobile devices that use Android. I don’t own an Iphone, so I can’t give you input there. I think the Android issue is a known issue. The parallax element jumps to the top Z-index layer and blocks all underlying content below on an Android mobile phone. So, the the page is worthless on an Android phone because you can’t see anything underneath and just briefly see snippets of the page as you swipe downward, but the parallax element jumps right back over the page. I basically quit using wither Fixed Position or Parallax BG’s on a color background container on mobile devices with your theme. They are set as display:none; with media queries on everything below tablet width.
And finally, I have used Parallax effects that were coded in very basic web pages without a complicated code structure like Enfold and never got a hiccup in Firefox.
Cheers and good luck.
DonJosue, Sorry for the delay responding back to this thread! We work on local host, so there are no links when we are developing sites. Only screen captures.
You can close this thread. It was faster to code it from scratch. It is lightning fast, lazy loaded, fed from a database, resizes thumbs and full images with GD Library, scrolls and flicks each photo and thumbnail with Jquery animations, while enlarging fullscreen views with a lightbox and captions and a few more features.
Don
Hi Josue,
Thank you so much. This worked perfectly and was exactly the solution I was hoping for.
DonNo worries. Feel free to use it, modify it or improve. There are all sorts of twists you could do with the silhouette. A silhouette of a child’s hand-print, foot-print, or a parent’s hand coming off the Enfold logo holding a child’s hand. Many ways to skin the cat. Cheers.
Here is an up-vote for making an option to have larger images than 80×80. We have a client who has a landscape style logo that looks absolutely terrible at 80 pixels. It is way too squished at 80 pixels and is not legible. They wanted a pointer on Google Maps. We know how to do this through conventional coding and thought about tackling it with our own IFRAME showing a static page underneath an Enfold page.
Is there a workaround by diving into the Enfold code? We don’t mind messing with code. Point us to the appropriate page.
I would think something on the order of a max size of 250px (x) 250px + would be a better resolution for an image. $00.02 What we do is use a transparent PNG with an arrow that takes up a portion of the image. The remaining image canvas uses a logo. The transparency behind the arrow prevents the city and street location from being covered up with an image. It works quite nicely and allows you to see the exact location on the map while also offering up enough real estate and resolution for a quality, offset rendered business logo. You should pass this design idea to Kriesi or your content designers. It really works well if you make the arrow thin and precise. If you make it wavy and curved, it looks even better than the boring straight arrows. All we have ever received from a customer is compliments when doing this. They like their logo spiffy and visible on a map. It makes it look official and like it’s their own map and not Google’s.
Man that is clever, but yet so obvious and simple! I will have to remember this one. I will use it at some point and time. Perhaps in a Lightbox Window. Thx Ismael.
Oops. I noticed that use.com converted it to a gif image automatically when I uploaded it. You will need to change the file to a “.png” image and name it screenshot.png.
@Flikk Thanks for that link. Rather odd. That site says it is up, but it is down for me here and has been for awhile.
I am not having any issues accessing any other sites but wordpress.orgIf anybody else could try the actual website rather than a third party website this would be great!
We code most of our stuff ourselves so we don’t use WordPress a whole lot. So, it may be customary for their
site to be down. But, this would be the first time we experienced this.Thx.
Viewing the page’s source code, this is most likely what we want to edit:
data-controls='disabled' data-mute='1' data-loop='1'
So, how do we get to the underlying content to edit this in the short code editor?
My hunch tells me It probably needs to be this:
data-controls='enabled' data-mute='0' data-loop='0'Devin,
I want to ask you if the Full Screen Video feature is programmed for fallback video formats with self-hosted videos. MP4 is not native to Firefox, so you need to embed OGV/OGG format for HTML5 videos to work. I have not spent the time to delve into your code to try and debug things. I don’t have the time really, but I am wondering if your demo videos that you use to market your template to the masses have several formats on the server. Do you have a Flash fallback for Firefox and other browsers that don’t support MP4. If you don’t, then I do believe folks are going to have to manually convert each video and embed them in the three primary formats needed to serve up self-hosted videos. Probably a lot more work than they had planned and maybe problematic for them considering they will need to consider resolution, bit rates and aspect ratios. The public online conversion tools don’t tend to work very well and can render pixelated, jagged and chunky videos.
I would love to hear this is not the case and it works out of the box, but it simply is not working here after many hours. Again, I have not poked around in your code. I did that with the Masonry slider and figured out some hiccups which I documented, but I simply don’t have the time to do this again. Please let me know. I sent you several links above in the private messages. Thanks.
It doesn’t work.
Our videos on Youtube will not play. Just a black screen. Nor, would either one of the example videos you included in your GUI backend. It didn’t work in Explorer, nor Firefox. I copied what you did in the video step-for-step. I also tried the standard embed format with Youtube rather than a straight copy of the standard URL. You are probably aware that they are different.As a separate note, we are now on our 3rd hour on this, just to test out your demo video. The first two hours was trying to figure out where you stuck the feature on the backend. After three manual uploads to update for this feature, we were still striking out. We assumed the update was not uploaded correctly or there was an issue, so we decided to look for documentation. FYI, we do not ask for help the first time we encounter an issue. Probably unlike most folks on the forum.
Here’s a simple suggestion and remedy. Just tell folks it’s in a color background widget. The obvious place to look is the “add Youtube” feature in a Layer slider, but that’s not where it is. You should state this in straightforward text format on the example video. It may not be the correct eye candy to include on your sales page because you are focused on revenues rather than support documentation ;-) there.
Before we spend any more time on this, Q. Will this feature work with autoplay on the background video. Your demo pages require that you click on the background video in order to get it playing. Something most site visitors will not do, nor will they know to click on it and will just think it is just a big fuzzy background image. Great feature, but it appears it needs to be ironed out a little further.
Thanks.
Thanks for your input. Long weekend off here in the states, so can you leave this thread open for now until I get a chance to test it out. I won’t be able to take a gander at it until early next week. Thx.
Thanks for your input. Long weekend off here in the states, so can you leave this thread open for now until I get a chance to test it out. I won’t be able to take a gander at it until early next week. Thx.
P.S. If Kriesi reads this forum, pass along to him that I thoroughly enjoyed his recent blog post about video games and how he parlayed some of his thoughts about video gaming into a very insightful business article that I found quite compelling, insightful, well written, enjoyable and accurate. A clever and well thought out blog post.
http://kriesi.at/archives/playing-to-win-how-video-games-made-me-a-better-entrepreneur
BTW, we are heavily involved in simulation technologies here. Quite heavily actually.
Cheers.Peter,
Thank you so much for the code. It worked great. I edited the main file in the /enfold theme and not my child theme.
Can you put the masonry_entries.php page in the child theme and the site will still work? This will help with updating. I reckon I could just try it and see, but I seem to recall that I tried this with another core php file and it didn’t work. Only headers, footers, function.php seem to be recognized. I am not a newbie coder, but I am pretty new to WordPress. Picking it up pretty quickly though.On another note, you folks should really look at the lightbox script I’m using. I’ve used it for years and know the developer pretty well. It’s far superior to the lightbox you folks are using. There are over a hundred option settings built inside and the API has built in functions that help with many things like ajax refreshes and hosting up dynamic stuff inside pages. The support is fantastic and detailed. The only other site online that I’ve seen that has similar support is yours. FYI, I have no vested interest in the script.
For example, with your code, I’m now yanking the captions from the alt attribute in masonry, while serving up the title attribute with the mouseover option. So I can have a short caption on the thumb with a more detailed description in the lightbox window. A distinct advantage for using the alt attribute is that you don’t have the title displaying on mouseover which duplicates the mouseover effect built into masonry. It also avoids the title mouseovers built into most browsers and allows you to use javascript tooltips if you want. And, of course your alt descriptions can be very detailed which will help SEO.
I will probably look into your backend code some more in avia.js and in some of the php files to open up more flexibility by coding in a custom data- attribute that works with the lightbox script I use. By doing so, it will allow the insertion of all sorts of lightbox display options in the headers, footers and outside the lightbox as well — HTML, videos, dynamic content, you name it. If you can code it, it can be fed to the lightbox through the data- attribute that is specific to this script. I sure wished you had a customizable data- attribute built into the backend of the wordpress manager for < a > links. I will probably have to code it myself. I can probably do it, I just don’t know where to look for all the relevant code in all your php files. It could be a lengthy trial and error process. I chatted with the developer of your third party slider that you use and he likes the idea of a configurable data- attribute by the customer. He indicated he was going to look at it in a future version release. There are numerous benefits to having this if you are a true coder.
Anyway, these were some of the reasons I was asking for the alt attribute. You probably assumed most of the reason was for SEO.
On a separate note, where would I find the code that renders the alt and title form fields on the backend of WordPress where you update and modify a masonry element? What file is that in? I have found the code that inserts the lightbox attributes inside of avia.js.
Thanks again for your help. Your support in this forum is excellent. And I don’t say that lightly. I mean it.
Cheers,
Don@Compustar82 Beyond Compare is a fantastic program and time saver. http://www.scootersoftware.com/
@Devin , not trying to meddle with your support here, just trying to help. I have no relation to this company, but can vouch that it works as advertised and many programming friends I know use it. Although there is a trial available, comparison software is well worth the price due to the time it saves you. If you do any type of web management or programming and value your time, it’s definitely worth the cost.Cheers.
Here are some screen captures visually depicting my comment above in post id#184636
1. A hand-coded from scratch thumbnail gallery showing a part of my Youtube video gallery. This file resides outside of the WordPress environment and is fetched by an Ajax call. There is no < head > or < body > in the fetched HTML. It’s straight HTML with the CSS snagged from the parent page which hosts the < a > and href call firing the lightbox overlay hosting all the thumbs. This is illustrated in the screen capture below. Even with this complex Ajax fetch which requires perfect coding to execute correctly, no errors can be found with the automatically generated play graphic overlaying the automatically generated Youtube thumbnails. They are centered correctly. Compare this to the thumbnail in Item 4. below which shows the play graphic shifted downward in an Enfold template. Something in the CSS is affecting it and I haven’t nailed it down yet.
2. An example of the lightbox window that opens when clicking the thumbnails.
3. Enfold themed page with video thumbnail and comment section.
4. And here is the bottom of the page and an example where the play graphic shifts downward due to some CSS properties in Enfold. See red arrow. If img-width: 100% was not commented out in base.css, the thumbnail would be 480px wide and part of the graphic would reside outside the darker opacitized text content area on the right side of the page. FYI, 480px is a default size for youtube thumbnails in their API and my CSS shrinking the thumbnail is ignored in IE due to img-width: 100%
5. Point five is not related to img-width, but I thought I would share a tidbit about the CSS in your Comments system while I’m thinking about it. You may want to consider giving the .comment-entry CSS a property of display: inline-table;
It will vastly improve the flexibility of your comment layout for users. Right now, the entire parent Div will not expand and contract dynamically. For example, if you use the Ajaxify plugin recommended in your forum by Dude, the parent Div hosting the comments entry will now expand and contract like it should if displayed as an inline-table. The colored background DIV will work great and scale up and down. With the current CSS in Enfold, it does not. So clicking on “reply” or add a comment creates a big dynamic hole in the background where the comment form appears. The colored background properties are transparent and do not expand and contract due to the current CSS properties on .comment-entry. I am sorry, but all of this is being developed on Localhost and I have no public link to show you. The concept of an inline-table setting should not be hard for a coder to visualize if they know CSS. Pass it along. They will get it and it will add up.And finally, the reason for showing you all these screen captures, is maybe lost in all the text here. It can be boiled down to two things:
6A. I am looking for some direction working around img-width: 100% as it relates to Enfolds performance. Is it important?
6B. What global CSS property might be shifting my play graphic downward? Point me in the right direction among your CSS files. I will probably figure it out from there.
Cheers.
We had some issues with with max-width on the base.css file. Specifically, we have a script that automatically generates thumbnails for youtube videos with a ‘play’ button graphic. It also removes the ugly black bars with the thumbnails generated by Youtube for non-16:9 videos and then links the video into a lightbox style popup window to play them. Upon completion of the video, it automatically closes the lightbox window, so no nasty advertisement popups appear in your face. It does this automatically with no interaction by the website visitor. Smooth, nice and unobtrusive. So there are Ajax callbacks happening to refresh the page content at various stages. The play button graphic has difficulty appearing centered in the thumbnail image using the enfold template upon loading. Something that doesn’t occur when we hand-code a lot of Youtube video links in our own web page. We’ve loaded 40-50 Youtube thumbnails on a hand-coded page with no errors, picture perfect thumbnails and the play graphic dead centered in the thumbnail. And that’s working on Localhost too! Sniffing around your CSS, it may be narrowed down to the img CSS inside Enfold, but I haven’t completely nailed it down. In IE, the thumbnails simply wouldn’t show up, until I comment out the following line in base.css Line 152
max-width: 100%;So how important is this line to Enfold’s performance?
Do you have the CSS properties set at 100% for a reason? Is it important for responsiveness perhaps?
Curious. Commenting out that line cured the IE problems, but we still have the issue with our transparent play graphic not centering in the middle of the thumbs.I realize this is a site specific problem and probably not a major issue with 99% of the folks that have your template, but I would like some input about why the settings are set at 100% so we can look at options on our end. It would also be useful to know if we have overlooked some CSS properties inside the various Enfold files that may have an impact on what I’m describing. I apologize but I don’t have a link online for you to look at. I may be able to put up a test page on a server to illustrate what I’m talking about. It would also show you a rather nifty script that is far superior to the lightbox clone you’re using. It’s very full-featured, has it’s own Ajax library with lots of nifty functions for advanced webmasters and the documentation and support is like no other script online. It’s been around for a very long time too. I figure you folks are vested in your current lightbox script, so I haven’t brought it up, but this one is light years ahead of the one you’re using. Not even close. I changed the entire look of the lightbox to black with one property setting. I saw a thread asking about putting the “title” attribute into the caption area of your Masonry script.
With this script, it’s one simple attribute/option to set and you’re done. No javascript to code inside your functions. It snags the title attribute and loads it into the caption area automatically. It’s good-to-go out of the box.Anyway, I thought I would expand on your question about max-width. This is one of the circumstances where we had issues with max-width, so if it’s not necessary for the performance of Enfold, then you folks might want to consider changing it due to it’s historical problems with IE.
Cheers,
DonHi Josue,
Late to the party and getting back with you. Thanks for posting the code. I will look at it soon, but I’m up to my neck in some other parts of the site. When fandragon, gets back with you, feel free to close the thread.Thx.
@maratino Thanks for the tip. I will add one thing here to your post. IE 8 can have issues with max-width. It may not happen with your code, but folks should be aware of some max-width issues with IE 8. Usually it’s with an element with overflow:hidden. And for sure it has issues with < img > max-width when the widths and heights are specified. In that scenario it works in compatibility mode, but not in standard mode. There are additional oddities with IE 8 that a Google search will highlight as well. I share this tidbit so that if someone has weird things happening in IE 8, they might want to take a gander at max-width. It has troubled us on many occasions.
Having said that, we have definitely experienced some issues with some max-width properties in Enfold. I’ve meant to bring it up, but haven’t had the time. Perhaps I might start a separate thread, but specifically, in the base.css file, there is a global property on < img > with max-width set to 100%. It’s near line 150ish (I’m recalling this from memory). We have some dynamic content being inserted into areas of Enfold with Ajax and callbacks, and the max-width property is not recognized in IE 8. No image renders in the browser. This is a separate matter for another thread, but I thought I would bring it up as an example just in case some folks experience some odd issues in IE 8.
I thought I would mention one other thing. Please do not use any of the images in that screen capture. They are not stock photos. I’m making a tribute gallery for my deceased dog and the photos are mine. I doubt anybody would use them, but I thought I would mention it because you never know what will show up in Avatars online. Thanks for respecting this.
+1
I am working on this exact same thing here.
I do not have a website for you to login to because I’m developing on Localhost here.
If you have code snippets you could paste here I will be able to figure it out. It’s irrelevant if the element ID’s and CSS properties relate to another site’s code – whether it involves PHP, Javascript, CSS, or a combination of these, I will probably be able to figure it out.Thanks.
Well, that’s a start. But not completely there. So, I decided to dive in myself. To make the entire .avia-icon-list-container take up less content area requires substantially more CSS involving edits to the children H4, P, line-heights, margins and various other things. It’s a matter of taste and you will have to fiddle with several things to make it work for your site. I offer some code snippets and comments to aid you in doing what you want, along with before and after screen captures to see what the results will look like. I am not completely sold on what I made here and think it can be tweaked more, but it should give you the nuts and bolts to get the job done for your site. Please note that .page-id-734 class relates to my installation here. Your mileage may vary. You may want to change things globally, or perhaps you can make a Class wrapper to selectively control specific Icon Lists within the Icon List page editor. Enable the custom CSS Class settings in your functions.php file in your child theme for the latter. Search this site for the code block to enable that feature.
In my opinion, there should be some options on the back-end for doing this automatically as mentioned in my previous post above. If you folks at Kriesit.at want to use this code base as a baseline for improving a more automated method, I think folks will welcome it.
Cheerios and good luck.
.page-id-734 .avia-icon-list LI { /* margin-top: minus top property tightens up the spacing between each topic item margin-left: minus left property shifts the entire icon list container back to the left due to the margin-left settings in .iconlist_icon that recentered the dotted lines */ margin: -20px 0 0 -17px; } .page-id-734 .avia-icon-list .iconlist_icon { height: 40px; width: 40px; font-size: 22px; line-height: 40px; /* margin-left: Important to do here - recenters the dotted line margin-right: gives space right of the circle for adjacent text */ margin: 0 30px 0 13px; } .page-id-734 .avia-icon-list-container .iconlist_content { font-size: 12px; /* line-height: tightens up paragrapgh content under the item heading */ line-height: 17px; } .page-id-734 .avia-icon-list-container H4 { /* Resizes the Item Heading */ font-size: 13px; }
