I have a piece of HTML code for a particular item for sale on a website. This code has all of the information needed for the item, including title, price, dimensions, weight, etc. It also has an "Add To Cart" button included with it.
What I want to do is turn away from Wix and hand-code the entire website using HTML5, CSS3, and Bootstrap 4.1.1. I want to use the same HTML code snippet that I included in Wix, but without the button. I will create my own Bootstrap button.
My question is how do I make it so the code runs when the bootstrap button is clicked?
Thank you.
What you want is JavaScript. Not to split hairs, but HTML is technically not code; it's considered "markup." To get dynamic information, you have to use JavaScript. This might require more conplexity than you realize.
var containerElement = document.querySelector('.container');
var buttonElement = document.querySelector('.button');
var populateContainer = function() {
// do some stuff here
}
buttonElement.onclick = populateContainer;
You may also need some knowledge of a back end language, like PHP, to help you build your shop. For a beginner, I would recommend looking into WordPress so you could install a plugin that handles that stuff for you, like WooCommerce.
Would need more details on what exactly you're trying to do, but Javascript/jQuery is a great way to dynamically make links when a button is clicked.
Assuming you have inputs from the user to get certain product attributes (color/size/etc). You would make it so that when a button is clicked, the jQuery code would check each input and stitch together a URL for you.
Related
Wanting to add a div element if a class is present on the page.
This is for IPS forum software. Reached out to them about this and their response was that they would charge for a custom theme design. Would rather do this myself if possible (bit too expensive otherwise).
I want to display a specific div for the "compose new private message" modal popup without displaying it on all other modal popups. Can't use body page controllers so I'm guessing my only option, other than having the PM modal inherit from a new template, would be to try and display a div if a certain class exists.
Templates are stored in the database for IPB. You can utilize the Admin system to go in and edit the templates. There is an extensive series of menus that give you access to individual template code, for example, under Messenger, there is sendNewPersonalTopicForm, PMQuickForm, and sendReplyForm.
It should be relatively easy to go into those templates, find the markup you want and add a container div where appropriate.
For example, for a 3.x board, you find something like this:
<div id='message_compose' class='post_form'>
<form id='msgForm' style='display:block'
action="{parse url="module=messaging§ion=send&do=send" base="publicWithApp"}" method="post" enctype='multipart/form-data'>
This seems fairly simple code to alter.
I would recommend a Plugin with a theme hook. You can put your logic in the php file and assign your hook to show up exactly where you want it.
I've Googled around for about an hour, without luck.
I'm trying to build an advanced contact formula i a Wordpress environment. The contact formula should do this:
At first, there should only be a single dropdown-menu available, like this:
Option1
Option2
Option3
If 'Option1' is selected, then some information should be shown, and then another dropdown-menu is shown, as such:
Option4
Option5
Option6
If 'Option2' is selected, then it should again show some information, but then show three other options, like this:
Option7
Option8
Option9
And so on. Many survey-formulars are built in this way - but I need to make it, to make a support-site for some different products.
I tried Googling for Wordpress-plugins, but without any luck (I must admit, I'm unsure of, what I should search for). I've used Wufoo-formula's before, but it doesn't appear to me, that Wufoo has that option.
How is this made the easiest and the best? Hand-coding it using HTML, javascript and CSS? Or are there a cool online-tool that I'm unaware of?
I had the same problem and made some research, which ended up in some results.
1. Buy the required functions
If you have a great number of forms to create and the money to invest, you could use something like Ninja Forms and buy the Conditional Logic plugin. With this you can create multiple forms and connect their elements with the needed criteria to show or hide them or to change their values.
https://ninjaforms.com/extensions/conditional-logic/
2. Code the form
Actually we have only one form we use. This is the reason, because I decided to save my money and did it myself.I expanded our wordpress theme by another page template and created the form that fits our needs in it. After that I added the PHP code to send the form via email on the top and the JavaScript code for the conditional logic on the bottom of my php file. In Wordpress I created a new page and applied the newly created page template.
I'm not sure if this is best practice, but for me it was an easy way to achieve my goal and save some time.
Best regards
I am making a website which will have lots of photographs. When a user clicks on a particular photo, a new page will be loaded with that photo being displayed bigger in size. There is a next button which will take the user to another page where there is another photograph. Therefore, my website will have lots of sub webpages( a little more than the number of photographs I have on the website). So is it usually how these kinds of websites are made,i.e., with lots of webpages or is there any other alternative for it?
No, that's not the usual aproach, al least on these days.
When we encounter with a similar situation like your case, we usually try to make it dynamic.
For example, if you need to show a lot of photos with the same markup and format, maybe the best option is to have a template with a variable.
The variable will be the photo url and the template will be everything surrounding it.
The page is the same, but only the photo changes.
There are a lot of advantages of doing this. Mainteneance, simplicity, work-load, cache...
Of course that can be use in another cases, like viewing a new details, when you would have only a ViewNew page, and you pass a parameter with the identifier of the new so you can show the correct request.
There are plenty ways to achieve this, most of them require server side code, to handle and process the request, like:
PHP
ASP/ASP.NET
Java
ColdFusion
Perl
Ruby
Phyton
...
But, some of this operations, could be also achieve by javascrip, a client side script code.
You could work with pure javascript or use a framework to make things easy and compatible. Here's some examples of javascript frameworks:
jQuery
YUI
Mootools
Dojo
Midori
...
I don't know if you want a particular examples using one of this languages or only know alternatives. If you need examples or need more information I'll be pleased of provide some.
Also, It's common that even if you are using a server side code, use javascript too, because can handle the behaviour on the website and/or make ajax request for asyncronous requests.
EXAMPLES
JavaScript simple:
jsFiddle
HTML:
<div>
<button id="previous" onClick="previousImg();">Previous</button>
<button id="next" onClick="nextImg();">Next</button>
</div>
<div>
<img id="imgViewer" src="http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-1-icon.png" />
</div>
JavaScript:
var imgUrlTemplate = 'http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-$number$-icon.png';
var imgCounter = 1;
var imgViewerNode = document.getElementById("imgViewer");
function previousImg() {
if(imgCounter > 1) {
imgCounter--;
imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
function nextImg() {
if(imgCounter < 9) {
imgCounter++; imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
If you have 1 html page and in that you write the PHP include 'photographlink' in the body with a case system of some sort. It will use 1 html page and it will include a different photograph depending on which photograpg is clicked
http://www.php.net/manual/en/function.include.php
I think the better way is to use javascript, my tip is to use jQuery framework to dynamically load and visualize images. You can find in the web some plugins that can simplify your life.
demo of one plugin
Is there an easy method to kill all links on a Wordpress page? I'm basically stripping down the twenty-eleven theme and pulling it in a simple iFrame on my site to act as a simple news feed. I want to kill all the links, eg - currently, by default, the Wordpress Post titles link to the stand alone posts; just wondering if there's a simple way to void those links with a CSS snippet I can throw in the header, or style sheet.
Edit: To be specific, I want to keep the text of those default links. Just not have them link, so I think display: none; wouldn't work.
I know I could do it manually, just always on the lookout for little tricks - as I feel there could be one, since I don't want any active links on the page.
I guess jQuery could do that for you with something like:
$('a').removeAttr('href');
CSS cannot control this, other than hiding all of the links. You'd need to use JavaScript for this....or edit the PHP source.
Its a bit difficult to determin what you want to do but....
You can hide all links using the css
a {display: none};
Or hit a specific selector or class such as so you would only hide specific links...
a.wp-link {display: none};
You could also do something using javascript such as
(jQuery example)
$("a").attr("href", "#");
This would replace all link urls with a # or what ever you want - so you could also set a redirect.
Finally you could so somthing more sophisticated:
$('a').click(function() {
alert('Site under development...check back soon.');
return false;
});
That (untested) would show an alert if a link was clicked and prevent its default action.
Note all these seem very 'hacky' and if it is a short term fix while you are developing would be acceptable but if you are looking at a long term solution it seems like you need to have a more indepth look at your wordpress set up.
$("a").click(function(e){
e.preventDefault();
})
I would like to build an application that contains HTML web control, and enables searching and highlighting multiple phrases in the html area, like it's implemented in web browsers today.
The main idea is to make the search ignore the html special tags, and refer only to the real text (the inner html).
I know that the solution will include editing the DOM, but I'm not sure how this could be implemented.
I searched a lot over the net, and I read also the post of Zavael, but unfortunately I couldn't find any suitable answer. Any answer, example or direction will be appreciated.
If you are referring to an inline search of HTML content within the page: firstly I would say that it probably isn't a good idea. You shouldn't supplant the browser's native functionality. Let users do things the way they are used to. Keep the experience consistent across different websites.
However, if you need this for some niche purpose I don't think it would be that hard.
jQuery could achieve it. Just a very rough start:
//As you type in the search box...
$("#search_box").change(function() {
//...you search the searchable area (maybe use some regex here)
$("#search_area").html();
});
EDIT: Questioner asked if I can elaborate on the code.
//As you type in the search box...
$("#search_box").change(function() {
//This part of the code is called when the contents of the search box changes
//This is the contents of the searchable area:
$("#search_area").html();
//This is the contents of the search box:
$(this).val();
//So you could perform a function here, like replacing the occurences of the
//search text with a span (you could use CSS to highlight the span with a
//background colour:
var html_contents = $("#search_area").html();
var search_tem = $(this).val();
$("#search_area").html(html_contents.replace(search_term, '<span class="highlight">'+search_term+'</span>'));
});
Please note that in the above example, the Javascript 'replace' function will only replace the first occurence. You need to use a regular expression in the first paramater to replace all. But I don't want to write all the code for you ;)