Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Bernard West

Member
  • Posts

    573
  • Joined

  • Last visited

  • Days Won

    2

Bernard West last won the day on June 30 2015

Bernard West had the most liked content!

2 Followers

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I honestly don't know. I kind of missed the mobile coding revolution. Hopefully someone with some mobile coding experience can answer that for you.
  2. Ah, sorry, I led you astray. "minimum-width" should be "min-width". That should make it display ok on a mobile. You might have to adjust the value a bit to get it right. To make the main content smaller you need to adjust the "max-width" property of the content. It's a different selector. I'll edit in all the correct code into my original answer and you can just cut and paste it to make sure you got it right. Give me a minute to do the edit.
  3. Hi Toni. Yeah, we just need to fiddle with the padding of the elements. add this to your #canvasWrapper css that I gave you above: padding-right: 300px; You can adjust that value of 300 to get it exactly where you want it. 300px looks about centred on my browser. Just check it works alright in a mobile browser. If it breaks down, we might need to insert a "minimum-width" property to stop the content from shrinking to fit a small browser window. Let me know how you go. eta: insert "minimum-width: 200px;" in the canvaswrapper css as well. Just to be sure.
  4. Hi @LizzyN ... In my code where I write: You need to change what's between the single quote marks after src= So, for example, your image might be .... src='http://yourimage.com/yourimage.jpg' ...
  5. I had a quick look at your site. Try adding this to your css. It roughly centres it. You may need to fiddle with padding a bit to get it perfectly centred. #canvasWrapper { margin: auto !important; padding-right: 300px; min-width: 200px; max-width: 275px; } #headerWrapper { position: absolute !important; left: auto !important; } Let me know how that goes. Edit: Adjusted code based on discussions in the comment section below. Note, your max-width of the content and sidebar is 450px at the moment. You can adjust that max-width value to anything between your min-width and 450px (if you want to make it smaller than 450px wide). Just change the 275px value.
  6. Yeah it will be. I'll try and get back to this later to have a look at it. If I don't, it might be a week or so before I can get to it. Got to travel to a funeral on the other side of the country leaving tomorrow. Off the top of my head, what you'd need to do is add some code inside the if/else (state.collapsed) block, to change the image to the new/correct one for each branch of that if/else block. To change the image you'll need to get the element with code and change it's 'scr' attribute.
  7. Ah nice! Yeah, jQuery makes these sorts of things easier. I'll have to learn about this markdown stuff. That's far easier than writing the whole html code and content like I did.
  8. Well, that took longer than I thought. Story of my coding life! ;) Anyway, here’s a bare bones solution, that you will need to style up to your own satisfaction. I’ve implemented a dummy FAQ temporarily on my free trial site that I am building and you can see it here for a few more days before I delete it: http://bernard-west.squarespace.com/faq/ Alright, firstly, don’t delete your current FAQ/product pages. Do this on a new page to make sure it works first. Next add a new “page” to your site. Click the plus symbol to add a new block to your page. Select “code”. Paste this HTML code into the popup box (with your own questions and answers - replace “Question 1” etc with your own questions/products, replace “Here is answer 1…” etc with your own answers/descriptions): <div class="questionBlock"> <span class="question" id="Q1" onclick="expand('A1')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 1</h2></span> <span class="answer" id="A1"><p>Here is answer 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span> </div> <div class="questionBlock"> <span class="question" id="Q2" onclick="expand('A2')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 2</h2></span> <span class="answer" id="A2"><p>Here is answer 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span> </div> <div class="questionBlock"> <span class="question" id="Q3" onclick="expand('A3')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 3</h2></span> <span class="answer" id="A3"><p>Here is answer 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span> </div> You will also need to change the image source for the little arrow that I randomly selected off the net. That is, this bit here: <img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Change the link between the single quotes to your own preferred image (if you even want to use an image. If you don’t want an image, just delete the above image tag wherever it occurs in your HTML. Save that then click the settings button on the left hand menu and then click “code injection”. This is where you’ll put the JavaScript. Put the following JavaScript code into the “Footer” section: <script> var arrState=[]; (function() { var arrAnswerBlocks=document.getElementsByClassName('answer'); for (var i=0;i<arrAnswerBlocks.length;i++) { var element = arrAnswerBlocks[i]; var state = {id:(element.id), collapsed:true}; arrState.push(state); } })(); function expand(id) { var state={}; var answerBlock=document.getElementById(id); for (var n=0;n<arrState.length;n++) { state=arrState[n]; if (state.id==id) { if (state.collapsed) { answerBlock.style.display="block"; state.collapsed=false; } else { answerBlock.style.display="none"; state.collapsed=true; } //end if }//end if }// end for } </script> If anyone wants an explanation of what the JavaScript is doing, let me know. The last step is to put in your CSS styling. Click the “a” on the left menu to go back to editing your new page. Click the “Settings” button in the top right of the page and then click “Advanced” and enter the following CSS into the code box: <style> .question { cursor:pointer; color:black; } .answer { display:none; color:#606060; } .questionBlock { padding:2px; } #clickIcon { width:0.8em; height:auto; position:relative; top:2px; } </style> This is the code you want to adjust to get your styling right. You can change colours and fonts and spacings etc here. One strange thing I noticed while doing this is that the preview of the site while you are logged in doesn’t match the actual live site. I think it’s some sort of clash between the style editor and the custom CSS that we entered. If you have another browser type, access your site as a visitor (i.e. not logged in) via it and you can refresh it and see the live view as you make changes while logged in on the other browser. Go for it! :)
  9. I can have a go at doing this. It should be possible with a mix of javascript and css. Can either of you post a link to your site so I have something to work with? Cheers.
×
×
  • Create New...