http://themeforest.net/item/retro-portfolio-one-page-vintage-wordpress-theme/full_screen_preview/1708109
I wish to create something similar to this, however there is a nifty button that takes a person back to the top of the page, as well as a static header DIV.
Would be a case that i make the top div fixed?
#div{position: fixed; }
also would the back to top function use:
"LINKING TEXT HERE"
But with some CSS styling?
thanks
Kirsty
There is a very nice plugin you can use to achieve this. You can find it here : http://wordpress.org/extend/plugins/dynamic-to-top/
Related
I've been trying to figure this out all day but have reached my code knowledge limit as I try to change the child theme to achieve this.
Here's an image showing what my site currently displays, next to an image of the desired result.
What I have VS What I want
I've tried using a few snippets of code I've found on the Stack Exchange that remove Woocommerce descriptions but with no luck. I'd like to remove the gap, the description title, but must keep the description box itself because that's what allows the tabs at the bottom of the page.
Here's a link to the page itself, I can find and isolate the gap and fix it using the html, but I've no idea how that relates to the CSS (I'm new to this) Link : https://folduptoys.com/product/space-garden-playset/
Here's how it's currently set up, I'm using the Salient theme, with the 'Product Tab Position' set to 'Fullwidth Under Images'.
Any help would be really appreciated. Thank you x
-Alex
Here's what will work but it's important to note that if other tabs show up, like 'Attributes' or 'Dimensions' that they'll be visible, but the `Description' tab won't be. So you'll have to consider whether you want it to work that way or not.
There's two things going on, first, the margins on the tab menu were big. 70px on top and 50px on the bottom. Seems too large in my opinion but I long ago gave up guessing on why Salient's devs do anything.
The second thing is to hide the 'Description' tab. If other tabs end up being present though, they'll show up in it's place.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
margin:0 auto;
}
#tab-title-description{
display:none;
}
If what you want is to entirely remove the tabs navigation, meaning that if other tabs are there, no one will be able to see/access them, so not a good idea unless you're also modifying the tab content layout so that they all display, then use this to hid that whole bar.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
display:none;
}
Goal: I need to set anchor tags for the wordpress-site: http://joy-academy.eu/programs/
I am using Visual Composer and there is some animation.
Problem: If I try to set an anchor tag, it scrolls to the right place but does not show the previous parts that are animated like here:http://joy-academy.eu/programs/#example or if I use a Plugin "scroll to Id", it just scrolls to a random place, like for example here: http://joy-academy.eu/programs/#cc
Details: The Wordpress Theme is "Zyen". Ref: https://themeforest.net/item/zeyn-multipurpose-wordpress-theme/8848292
Thanks for your help!
I see that your site is using the Zeyn theme.
That's the first place to look for coding style changes. Here's a demo example doing what I think you are hoping to achieve. http://djavaweb.com/selector.php?theme=zeyn-classic
This means don't use the button for an anchor. So, use the Extra id in the rows to correspond with the anchor link (#example).
Here's the directions to do this; just start after the steps about the menu items.
http://kb.detheme.com/knowledge-base/zeyn-faq-one-page-navigation/
http://pointnorth.io
How did they make the expanding sidebar on the left? It seems like it's css only but I might be wrong.
There's the main url and then the other ones are all preceeded by #, the text is all on one page and then it expands or hide when clicked.
I don't understand how they hide or display data.
It's not only CSS. This page in bottom of body has javascript code, which sets data-active attribute for link, which was be clicked. As you can see, data-active made section of sub items with height: auto. In other cases .nav--sub-sections class has height: 0px.
You can easily implement your own without lifting someone else's idea.Look at this fiddle http://jsfiddle.net/vfrcx678/ and how it goes here http://jsfiddle.net/vfrcx678/show/
This is some sample code
$(window).hashchange({
hash: "#!/login/",
onSet: function() {
$("#login-form").show();
},
onRemove: function() {
$("#login-form").hide();
},
});
Project page https://github.com/apopelo/jquery-hashchange
a quick introduction :
facebook has changed the LIKE (count) button
into something like :
LIKE (count)
[ -------------------- clic = open a Big zone bottom / right --------------------]
problem :
Its nice BUT ....
you forgot that a lot of website are using the like button in "toolbars". Page example
Header
Left column Tooblbar, include fb:like -------------------- Right column
Document content
Footer
and lot of structured pages/ blocs are using "overflow:hidden" !! So it makes the displayed widget randomly truncated everywhere (right, bottom...) depending of its environnement.
Its impossible to remove all the overflow:hidden from the containers blocks, to satisfy a widget update.
What can we do. Some sites where clean, now they look drafts, with all button opening truncated stuff...
any solution ?
If you want to use the Facebook plugin, the only solution seems to be to change the HTML/CSS so overflow:hidden can be removed. Alternatively, you could try to use a service that forwards the user actions to social networks for you and offers different methods of website integration.
If you're not using overflow: hidden for semantic reasons, you could always change it to overflow: visible or just remove it. I'm assuming that the fix isn't that simple...
A quickfix that wouldn't require you to modify your CSS would be to place your FB Like button outside of any containing elements that have overflow: hidden or overflow: auto and use absolute positioning to get it where you want it.
This really bugs me - a lot.
After wading through google maps v3 generated client side code in firebug, I'm about ready to drive down the street and give some of these engineers a piece of my mind... arrrgh :P
The infowWindow class produces HTML that personally I would think is simply nuts. maybe someone can help me make sense of it.
The infowWindow HTML structure is like this:
#map_canvas > div > div > div > div > div // 5 levels of elements,
no big deal here, ok...
> div // top left corner
div // top right corner
div // bottom left corner
div // bottom right corner
// now comes fun stuff for the speech bubble arrow:
div
div
div
div
div
div
div
div
div
div
// the 10 divs above are stacked diagonally with odd sizes to make this arrow.
i'm sorry but WHY?!? is it done like that? I suppose they wanted the user to be
able to grab the map even right next to the arrow. Think about this: do users
really need to be able to not grab the arrow? if grabbing the arrow causes map pan,
as is the case for the shadow images, would that really be a problem?
div // bottom middle for image background border or something
div // top middle
div // middle
div // bottom middle, again
div // entire block of the infoWindow, probably the container
> img // close box
div // center block with the contents of the infoWindow
div // text content container
WOW - thats nuts!
notice there is no real semantic structure, and - gosh, dare I have such an
assumption - no class names anywhere, nothing. I figured maybe they have some
kind of 9-slice box going on and then produce the arrow separately; I mean,
the image sprite in iw3.png sure isn't going to be the problem here.
I dearly hope someone who has an effect on this api comes across this and
hopefully google will eventually find a way to solve this such that custom
infoWindow visuals are as straightforward as markers.
Thanks for tuning in! happy commenting.
meanwhile I shall use a hack to get to these crazy divs and make them do my bidding.
earlier I commented on some other post and I think it shouldn't be too much to ask for a method in the API that lets you use custom UI without resorting to a near-duplication of the whole window object as is currently necessary (see google extension classes v3).
google.maps.infoWindow.setStyle({
'topleft' : {
'background' : 'url(images/windowsprite.png) 0 0 no-repeat',
'width' : '10px',
'height' : '10px'
},
'topRight' : {
...etc...
}
...etc...
})
Have you tried InfoBox?
http://googlegeodevelopers.blogspot.com/2010/04/infobox-10-highly-customizable.html
or InfoBubble?
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
They both give you a bit more control over the appearance of infowindows, while still abstracting some of the complicated parts.
The lack of classes on elements is a (good) design decision for an API. It eliminates the potential for clashes with user defined classes.
After much trial and eror I decided the best way to resolve this is to use OverlayView class and simply custom build a container. Well, "simply" is an understatement, but it works. And now I have full control over layout and functionality.
You try styling with CSS? The below example shows this. This is the most straight forward way to change the UI.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows