A plea to all wiki gurus - can anyone help me create a link to another page in the same wiki when the wiki page is constructed in html?
Alittle background & context: I decided to get a bit arty in my mediawiki and made a simple landing page constructed using CSS and div elements to sit on a mediawiki page. After a little fettling, I managed to get the HTML rendered correctly and the page looks very nice!
Now I wish to use the div elements (lets call them 'buttons') as links to other mediawiki pages within the same wiki. (the actual 'buttons' are made up of several elements wrapped in a containing div element)
The actual html for a 'button' looks like this:
<div class="cf-box"><div class="cf-box-title">Button Title</div><div class="cf-button-icon"></div><div class="cf-box-text">Description of the information the button links to</div></div>
Using HTML, this would be a simple process of wrapping the containing element (cf-box) in a link and all is good in the world. I assumed that you would be able to do something similar in mediawiki such as..
[[Some Page|<div class="container"><div class="button"><div class="text"></div></div></div>]]
but when I try this, the outer 'container' opening and closing div elements are stripped out and displayed on the page as text leaving the internal div elements orphaned rendering garbage on the page. The link does work though!
Thanks to anyone who takes a look!
Related
I do not know if this is easy or standard. I would like to be able to put a tag around a paragraph so that the paragraph is invisible in the main page of a tumblr account, but visible in the post.
A little bit similar conceptually to the [READ MORE] idea, except it just takes out a single paragraph.
My objective (in case there is a better way out there), is to have navigation at the top of the post (above the first paragraph), but for that navigation not to show in the main page where all the posts are listed.
From reading on the web (eg here), it seems that {block:PermalinkPage} can be used to hide text everywhere except the page. So I would either need to create a structure (e.g. or something) inside the html background that takes advantage of this (I don't know if this is possible), or do something similar with code in the actual post.
I'm not sure if I fully understand your question. If you want to create a text post with a paragraph hidden on the index page of your theme, then this should help:
Add this inside of the CSS of your theme code:
{block:IndexPage}
.hiddentext {display:none;}
{/block:IndexPage}
Create or edit the text post in HTML mode, and style the text you want to hide liked this:
<p>This is text that you will see!</p>
<p class="hiddentext">This text will only be visible on the permalink page!</p>
The text will display normally on the dashboard and on the permalink page of your blog, but will be invisible on the index page of your blog.
If you don't know where to add the css, go into your them HTML and search for </style> and place the code directly above that.
If you are wanting this navigation to show up on all post pages, and not show on the main page, you should put the navigation in your html and wrap it in {block:PermalinkPage} and {/block:PermalinkPage}. If you do not want this to show up on ask pages, and pages you create yourself (only post pages), instead wrap the html in {block:Date} and {/block:Date}.
You would put this somewhere after {block:Post} and before {/block:Post}, but without seeing your code, I can't be more precise.
I have a situation where the client needs to be able to insert html he is copying off other sites into a product description.
He has no clue about html so he is literally copying it off the site with the permission of suppliers and then pasting into an Opencart description.
The issue is that sometimes what he is copying isnt correctly formatted and so it may be closing divs too early or not closing them at all making the html for the remainder of the page all over the place.
Is it possible to have a situation where i can create div and basically tell it Close off this div here no matter what the html inside it contains?
Thanks.
I guess just to give an example. In this situation the bottom </div> would not close off <div class="myclosedoffdiv"> even though thats what Id like it to do.
<div class="myclosedoffdiv">
<div><span> This is incorrectly formatted html</span>
</div>
You can create jquery object from string (in case if using jquery):
var div = $('<div><span> This is incorrectly formatted html</span>');
div[0] will return:
<div><span> This is incorrectly formatted html</span></div>
then insert it into wrapper:
$('.myclosedoffdiv').html(div);
I have an assignment due in on the 18th of August 2014, and have now been told that I need to add certain section elements to my website. However, I do not know how to use them. what are the header, nav, main, article, aside, and footer elements use for and how do I use them in my website?
Since HTML is a Markup Language, there are specific tags that it outlines which are essentially considered "the right ones to use" in different places of your code. For example, if you were to put a navigation bar in your site, you would use the "nav" tag to outline the section in your code that contains the navigation bar code, but you could just as easily use a "div" without causing any different behavior. Now with that said,
Nav: The section that is usually just the top section of your page that holds links to different parts of your site (see the top of this page, however if you look at this page's source code you will notice they do not even use nav tags as specifically named tags such as these are not mandatory, you can simply use divs all over the place but that is not a good practice)
Header: The banner section if you will where the title of the page and other global information pertaining to the page exists (ie the a large representation of your site's logo or number of visitors for your site)
Main: The actual content of your site (the main content)
Article: Think of this as a blog post which typically consists of text and maybe an image
Aside: Usually inline with an article or some other block of text used to insert additional information (ie fun facts)
Footer: The bottom of your page which also contains links like the header, but usually are more verbose as well as copyright information (Stack overflow has a rather large one if you scroll to the bottom of this page)
You can read more about these specific tags here: Quackit - HTML 5 Tags and good luck with your project.
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
I've read various posts on this subject and think I understand the usual points of failure. I find that my two product thumbnail images, under the "This Click'n'Pick Set Consists Of The Following 2 Products" heading, are clickable, but do not take me to the named <div> element further down the page. Instead, they cause navigation to http://www.premierrange.co.uk/#bundle_product_anchor_448, for example. I see this both in Chrome (18.0.1025.33 beta) and Firefox (10.0.1) on Linux.
http://www.premierrange.co.uk/index.php?main_page=clicknpick&groups_id=2&chosen_0=243&chosen_1=448
So for example there's an anchor targeting '#bundle_product_anchor_243':
<a href="#bundle_product_anchor_243" title="Click here to jump to the 70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
<img src="http://www.premierrange.co.uk/thumbnailer.php?filename=images/H77-700.jpg&height=100" alt="70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
</a>
This targets the <div> further down the page:
<div class="productSeparator" id="bundle_product_anchor_243">
<h1>Product number 1 in this bundle of 2 products</h1>
</div>
I've also tried making the <h1> inside the target <div> be the target instead, in case the target must be an inline element rather than a div, but nothing seems to work.
The <div> containing the badly behaving <a> is completely closed by the time the <div> containing the target element appears in the document. I don't think there's a problem with the target element not being defined at the point in time the <a> is parsed by the browser.
Manually adding "#bundle_product_anchor_448" to the URL does work.
I am aware that the page fails HTML validation on a large number of points, due to a large number of factors that I'm not going to be able to address easily. I'd have thought this basic 'jump to a named element' functionality should work regardless. The page is completely functional other than this little navigation quirk.
Anyone got any clues?
Try removing <base href="http://www.premierrange.co.uk/"></base> from the page header.
The <base> tag specifies the base URL or target for all relative URLs (the ones that don't say http://www.example.com/...) on your page. Without it, your link should function as intended though you may have to fix other links to accommodate this change.
While using the <base> tag in your application, the best approach would be to just use absolute URL's before the hash, with the absolute URL pointing to the same page you're in.
So, assuming that you are on the 'http://example.com/products/curved-glass' page, instead of
<a href="#bundle_product_anchor_243">...
you would need to include the absolute current URL before the hash:
<a href="http://example.com/products/curved-glass#bundle_product_anchor_243">...
Finding out the current URL is a trivial task in most of the environments, and this method also avoids the removal of your <base> tag, action which might have negative consequences in other areas of your application.