Mikec1uk

Do you need a plugin for this?
 
Can you not just create a custom post type for suppliers and use advanced custom fields to create fields for the custom data?

It looks like the url to your image should be:
background-image: url("../../images/arrow.svg"); As that's where your other images seem to be located. E.g. http://www.take-a-moment.com/images/
 
However, even then your image doesn't load. Are you sure you have arrow.svg in your images folder?

Hi,
 
The way I do it is to make sure the field returns the image object.
 
Then use the code below in your template
$imagefield = get_field('image_field_name'); $imageid = $imagefield['id']; $image = wp_get_attachment_image_src($imageid,'large'); Replacing the 'large' with thumbnail/medium/large/full, or your custom name for an image size created in your functions.
 
You can then output the image url with:
echo $image[0];  
Hope it helps!

Hi,
 
The way I do it is to make sure the field returns the image object.
 
Then use the code below in your template
$imagefield = get_field('image_field_name'); $imageid = $imagefield['id']; $image = wp_get_attachment_image_src($imageid,'large'); Replacing the 'large' with thumbnail/medium/large/full, or your custom name for an image size created in your functions.
 
You can then output the image url with:
echo $image[0];  
Hope it helps!

Hey,
 
This sort of thing can be done with Skrollr https://github.com/Prinzhorn/skrollr
 
Hope it helps.

You could use a percentage padding on the header.
.header-background-image { padding-bottom:10%; background: no-repeat center; background-size: cover!important; -moz-background-size: cover!important; -webkit-background-size: cover!important; } Just changing the % to something that suits you.
 
Alternatively you could put a transparent PNG the size you want it within the header with a width of 100%. This will make it responsive and not collapse.

Have you tried just re-saving the permalinks? It does the job sometimes.

I go for the route of wrapping the table in a container e.g.
 
<div class="tableContainer"> <table> </table> </div>  
.
 
I then display the table as normal until it no longer fits.
 
Then apply the CSS via media query:
 
 
.tableContainer { overflow-x:scroll; -webkit-overflow-scrolling:touch; width:100%; }  
This allows you to scroll the table left/right including on iPhone/iPad etc. Usually works for me.

Hey,
 
I am currently working on a large multi vendor site for a client using WordPress and Woocommerce.
 
I used Matt Gates multi vendor plugin which I have been adding additional functionality too and I highly rate it. Well worth the $99.
 
http://shop.mgates.me/shop/wc-marketing/wc-product-vendor/
 
It's a very good plugin and if you have the know how easy enough to build on.
 
I prefer it to Woocommerce's own: http://www.woothemes.com/products/product-vendors/

Post_author should just be author.

Try adding:
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> To your header above your other meta tags. Your media queries will be ignored without it.

Hey,
 
IE8 and below don't support the @media queries you have used in your css (the 'and (min-width: 960px)' parts).
 
If you remove them it will work. If you need to use them, there is a jQuery plugin which may help you: Link

Hey. Try something like this:
 

function moveSlides ( a,b,c ) { var currentPosition = $(".super-slider").position(); var positionA = currentPosition.left var objWidth = obj.width(); $("a.next-slide").click(function(){ var currentPosition = $(".super-slider").position(); if($('.super-slider:animated').length<1){ $(".super-slider").animate({left:(currentPosition.left+objWidth)+"px"}); } return false; }); $("a.prev-slide").click(function(){ var currentPosition = $(".super-slider").position(); if($('.super-slider:animated').length<1){ $(".super-slider").animate({left:(currentPosition.left-objWidth)+"px"}); } return false; }); } moveSlides ();

I'm sorry if this seems like a harsh rant, but I don't like the idea of newcomers to JavaScript getting into bad habits and I want to teach you how to code properly.
 
Firstly, please stop using the "document.formname.fieldname" syntax. It was created by Microsoft to interact with the elements on a webpage before something called the "DOM API" was agreed upon. It was never formalised (standardised) and therefore shouldn't work at all. To find elements on a page, you have three functions at your disposal: document.getElementById(), document.getElementsByTagName() and document.getElementsByName(). There is also a function called document.getElementsByClassName() that is in modern browsers.
 
document.getElementById() is probably the most used function. It simply finds an element with a matching id. An id is assigned to an element using the id attribute; all ids should be unique and they shouldn't start with a number.
document.getElementsByTagName() will find all the elements that are of a certain tag name. In HTML, each element ("node" or "tag") starts with <tag where tag describes the element itself. By passing a tag name into document.getElementsByTagName() you'll get back a list of all the matching elements.
document.getElementsByName() will find all the elements with the given name attribute. Like ids, names can't start with a number. However, there can be as many elements with the same name on a page as you like (there's probably a limit of about 66,000 but I think you're unlikely to get close to that )
document.getElementsByClassName() finds all elements that have a matching class attribute. Elements can have multiple classes (separated by a space), classes don't have to be unique and they can start with a number (I think - I'm not too sure).
 
You were right about setting the value of the element to an empty string - this will clear the element's value. Displaying an error message near the form field instead of having it popup in an alert box is also the best way of showing that the field is not valid - well done on both accounts
 
Secondly, please avoid using element.innerHTML. It makes the the webpage seem like a mass of code, when a better interpretation is a collection of individual elements. If you want to create a new element then create it, creating text means creating a text node to put it into. It's also possible to remove these elements. element.innerHTML has too much potential for bad code to be inserted into a page and does nothing to preserve the code that's already there. There are other functions out there that can do what you want without these problems: document.createElement() will make elements, element.appendChild() and element.insertBefore() can be used to add that element to the page, document.createTextNode() creates text (just remember to put it into something useful like a P tag). Until you understand how to add and manipulate elements properly I'd recommend that you treat element.innerHTML as harmful,
 
To properly validate a form, it's a good idea to make your scripts as generic as possible. This allows you to use the scripts time and time again (after all, if you've gone to all the trouble of coding something once - why not use it a few times and save some typing? ) and your scripts are easy to upgrade understand. If you create a list of checks for your form, you can go through each one and see if the input passes. If it does, happy days; if not, you can highlight that form element and display a useful message explaining the problem. It helps your users quickly see that something's gone wrong and helps them see what that something is. Use a strong warning colour (like red) to show your errors and the messages - people are used to seeing red and thinking "error" these days
 
I've created an example of form validation that I've just written. I've tried to comment everything that I think needs explaining. If anything doesn't make sense or you'll like to understand it better, please don't hesitate to ask. I hope this helps.

Adding
 

margin:0 auto;
 
to the css of your wrapper div should do the trick.

Something like this?
 
Website

Hey,
 
When you group your css statements, you are using:
 

#mainContent,rightContent h1
 
Change this to:
 

#mainContent h1,#rightContent h1
 
and do the same for the h2, h3, li's etc.
 
To fix the positioning issue, just remove the 20px right margin on #mainContent.
 
Hope it helps!

Try using a global reset in your css to get rid of any unwanted padding etc...see if that fixes the slogan issue.

Hi,
 
You are trying to float the circle as well as use absolute positioning. Therefore the float is ignored.
 
Using absolute positioning means it will always move for different resolutions as it will always stay 45px away from the browsers edge. You have to use position:relative; within the css of the div the circle is in. This way, it absolutely positions itself within that div, rather than the browser window.

Thanks Morgano!
 
Now I know how to go about starting to set this up and that's all I needed, so thank you!
 
I will give this a go when I get back from work tonight.
 
Mike

Alternativeley, you can do it using CSS. Just make both the normal tab and hover tab into one image and change background positioning on hover.
 
Rather than explaining it myself, have a look at the tutorial Ben made:
 
CSS Rollover Tutorial

You'll need a seperate table we'll call it "used_codes" this is our link table to link users and the codes they've viewed.
 
The table will consist of:
 
used_code_id (unique id)
used_code_user_id (user id - this is the id of the user that used the code)
used_code_code_id (code_id - this is the id of the code used)
 
This table could become quite big but it's relatively simple. You will definitely want to add indexes on used_code_user_id and used_code_code_id to speed up queries.
 
Everytime a user ticks off a code we'll need to add this data to the table. You'll also need to lookup each code against this table to find out if it's been used by the user or not..
 
This is the fastest method for what you need to do.