I am using the "Wordpress Carousel Pro" plugin on my Wordpress site. That plugin uses the code from "Magnific Popup" to display a pop-up when you click an image. You can add text to the caption of an image and that text will be displayed on the popup but the caption doesn't take HTML it shows no HTML that I added
Link Button
Does anyone know why this happens? You can see what happens on this page https://videosafari.nl/tv/ on the first image of the first row I added a HTML button to the caption and you see things dont look good at all.
Apart from that I did manage to add this successfully.
<button>Default Button</button>
But when I want to add a link to that
<button onclick="window.location.href = 'https://w3docs.com';">Default</button>
It will not look like a button anymore and the result will be the same as with a normal button. (the first example). Does anyone know why this happens? Thank you in advance.
Regard,
Dean.
https://videosafari.nl/tv/
https://shapedplugin.com/plugin/wordpress-carousel-pro/
https://dimsemenov.com/plugins/magnific-popup/
Related
i want to decorate my website and add a few images of egyption gods with a button below them, so when you click on the button that says the name of the god, their descriptions will be displayed. I also want to toggle the themes of my website where by clicking the toggle them button, my whole enter website theme will changed
im kinda strugging with css and whatever background colour im setting it too, the website is not changing so any help with that would be appreciated <3.
here is my base code:
enter image description here
Not much to go on with the code however I could give some advice on how I would go about doing it. I would go about implementing this:
<div>
<img src='image.png'>
<p class='hidden'> this is the description </p>
<button>Show/Hide description </button>
</div>
You will have each image with its own description and button in a div and the description will be hidden by default. Add a event listener to the button so onclick it will add/remove the hidden class to show/hide the description.
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
Is there a way to use something similar to pointer-events: none to disable only the hyperlink and not the mouseover text?
For example, suppose I have:
link text
Then the link is disabled, but the mouseover text is also disabled. I want to know how to just disable the link, while keeping the mouseover text active.
You can replicate this using Javascript, just simply take out the style and add onclick.
link text
EXAMPLE
I would not suggest doing this, instead, I would suggest styling a <span> to look like a link, with a title to get the tooltip effect you are after.
Here is an example of this
Like this. Javascript will stop the link working when you click it. However the title is still shown when hovering over it
link text
This is not really very good coding though. If you don't want a link, then don't have one. If you want he effect of basically a tooltip then create a tooltip instead.
during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.
I think the image is not loading,please check my code
<div id="loadinggif" class="overlay" align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>
and when i click one page navigation am using following code
$('#loadinggif').css('display','block');
Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.
Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.
Another thing would be to clear your browser cache.
If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.
Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif. Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.
Let me know if that works.
Cheers M8.
I'm struggling to replicate the login form found at the top of the PayPal website.
I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.
I would like to be able to replicate the drop down when the question mark is clicked.
Any help will be greatly appreciated.
I hope I have made it clear.
What you could do is in your form have the question-mark image trigger a java-function... Ex:
<img src="my_image.jpg" onClick="myjava_function()">
Then in your java function you could have a div containing the drop-down displayed.
<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>
Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.
<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>
This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.