YUI (JS): Putting a MenuBar in a Panel - javascript

If I put a YUI menu bar in the body it works perfectly. However if I use it inside of a Panel it shows up without the proper background. It is larger than it should be. Other than the default sam skin I'm using only the following css. .windowbody is the class of the panel.
<style type="text/css">
body {
margin: 0;
}
.windowbody {
overflow: auto;
padding: 0;
}
.windowbody div {
padding: 0;
margin: 0;
}
</style>

I've been working on the same problem and I was delighted to finally find one more person who is trying to do the same as I am. I can't find any examples on the otherwise excellent YUI documentation pages so I've uploaded a solution to the problem at this address:http://catalinabuilder.hostjava.net/exercisepanel.html

Related

Change page background when hovering over a link

I want to have two different links and when hovering over one it changes the entire PAGE background to a different background-image-url. Then when I hover over the second link it changes the background-image-url to another picture. Is this possible? I am using Angular, I was thinking at first I could do this in css but I now think something more will be required. Any guidance would be greatly appreciated.
It won't be possible with pure CSS because selectors are unable to ascend.
What you're trying to achieve can be easily done though. Just attach hover events to the links and in the event handlers, add a certain CSS class to the page. And then define the styles for that class of course.
To add the class, what you need to do is set a state value to a certain value and in the page element, add *ngClass="{bgLink1: hovered === 'link1'}" or something like that. You get the idea.
<!DOCTYPE html>
<html>
<body>
</body>
<style>
body {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#link1 {
margin: 5vw;
}
#link2 {
margin: 5vw;
}
#link1:hover body {
background: url('');/*any url you want for the picture*/
}
#link2:hover body {
background: url('');/*another url you want for the other picture*/
}
</style>
</html>
I really hope I could help you, if not it wouldn't hurt to write the question another time but with code or something so I can understand what you want

Calling a function on bootstrap modal open - js additional code

its not dublicated question because I didnt understand the smilar
question's answer.may I can delete after solved my question, if the answer so easy.
When bootstrap 3 modal is opened, my mega menu appear upon it.to solve this, while bootstrap modals are opened, I must reduce z-index of mega menu.mega menu's z-index is maximum now for all time.
I found this question:
Calling a function on bootstrap modal open
it says:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
for bootstap 3.
how can I write this code with jquery or javasicript?
edit: to give specific request, I want to determine bootstrap class to use it instead of #code word and then, write changing z-index value of a spesific class via jquery.
https://resimli.yedek.deniz-tasarim.site/
website is this.
bootstrap modals open with sign up/login buttons on header. ( top-right )
I am foreign to bootstap 3 and there are many classes for modals.So, it confused me.
Your menu overlaps the modal due to the default maximum z-index.
Here's what the css rules for the menu look like now:
#wp-megamenu-header-menu {
z-index: 9999; <=== /*the problem is here*/
text-align: left;
height: 90px;
background-color: #fff;
padding-top: 20px;
padding-right: -20px;
padding-bottom: 40px;
padding-left: 0;
}
And this is most likely written by you:
.wp-megamenu-wrap {
z-index: 99999;
}
To solve this problem, it is sufficient to override the z-index with the !important rule. Insert this rule into your css:
#wp-megamenu-header-menu {
z-index: 1000!important;
}
And your overlap problem will go away!

Check when file is being dragged to website

I have been trying to check when a file is being dragged on to my website using javascript. I have tried putting a "hitbox" div covering the whole site:
<div id="Drag-File-Hitbox" ondragover="BGDragFileOver()">
</div>
<style>
#Drag-File-Hitbox {
position: absolute;
width: 100%;
height:100%;
margin: 0;
padding:0;
z-index: 999999999;
}
</style>
Whenever I drag a file to my website it does what I want but I cant click stuff in the background such as my navigation bar. I have also tried putting the ondragover event on the body tag but that didn't work either.
I fixed it by using jQuery instead, here is the code below that worked for others who might stumbleupon the same issue.
$(document).ready(function(){
$(window).on('dragenter', function(){
do stuff
});
});

a:hover CSS style affecting browser-based behaviour of buttons containing image

I asked this question earlier from my phone but it became very convoluted and confusing so I decided to start over after finding a usable PC. Note that I can't give the full original code nor images due to the project's classified nature which is also located offline. The bare-bones version below contains the same problem anyway, so I'm quite certain being able to solve the problem in this example code will be adequate for me to troubleshoot anything else in the actual application.
I have the following code: https://jsfiddle.net/mssdjrzk/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
When the cursor hovers over the button, a default browser-based behaviour is triggered. In the case of IE 11, the button is highlighted.
Next, I add additional CSS for a:hover: https://jsfiddle.net/yLrznyss/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
a:hover {
color: red;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
Now, when I hover my cursor over the button, the behaviour is messed up - the behaviour does not render, although other events like onclick renders normally. I have done a lot of troubleshooting and attempts to workaround without success, but here are my findings:
The offending element is :hover. It doesn't matter what element/class/id is attached to it, its very existence in the stylesheet is enough. Even a:hover {} which contains no styling will cause the problem too, as does span:hover {} when no <span> elements even exist in the HTML.
I tried it on Chrome, but the problem does not exist since Chrome's default hover behaviour for buttons is rendered differently. This is thus a browser-specific problem.
The problem only exists for buttons containing images, as opposed to buttons containing text, empty buttons or standalone images not inside anything.
My guess is that the existence of the :hover CSS in the stylesheet, even if it's empty, is causing issues in how IE renders the resultant web page and its behaviour.
How can I prevent the button and/or its internal image from being affected, thus returning to the default IE button hover behaviour? I can change anything, as long as the desired hover style on the hyperlinks is achieved without affecting the buttons.
The full application which uses this code will use IE11 on Windows 10 - not any other browser. Solutions using HTML, CSS or JavaScript are acceptable but no external libraries are available to my project.
Maybe I'm missing something, but I don't see any anchor links inside the button. I used this code:
button:hover {
background: red;
}
And was able to get the hover effect you are looking for
I have found a successful workaround. Since I can't use the :hover selector, I have to mimic it via JavaScript. Credits to Javascript onHover event for the solution.
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
.isHovered {
color: red;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for (var i = 0; i < links.length; ++i) {
(function() {
var link = links[i];
var hoverTimer;
link.addEventListener("mouseover", function() {
hoverTimer = setTimeout(function() {
link.className = "isHovered";
}, 0);
});
link.addEventListener("mouseout", function() {
clearTimeout(hoverTimer);
link.className = "";
});
}());
}
});
</script>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
I would welcome any better answer though, or at least an explanation of why I have this problem - if you are able to replicate it on your machine.

Scrollbars for code prettified using google-code-prettify

I am using google-code-prettify for syntax highlighting in my blog which is hosted on blogger. My problem is I do not see the scrollbars appear around my pre-formatted code blocks even when the code is too wide to fit within the designated width. I am formatting the code blocks with
<pre class="prettyprint lang-java prettyprinted" style=""> <code>public class MyVeryVeryLongClassname extends MyBaseClassWithAnEvenLongerName implements AnInterface, AnotherInterface, YetAnotherInterface { </code></pre>
On my blog, the scrollbars never appear and the line goes beyond the right edge of the post column (For example, take a look at this post), making it look very ugly. The same is displayed by StackOverflow as:
public class MyVeryVeryLongClassname extends MyBaseClassWithAnEvenLongerName implements AnInterface, AnotherInterface, YetAnotherInterface {
I used Firebug to look into how stackoverflow does this, and I couldn't spot anything different from what I am doing. I am linking to the same JS file as the one used by SO (on their own CDN). I'm also using the same styles.
So, what do I need to do to add the scrollbars to the pre-formatted code blocks?
Never mind, I found the solution. All I needed to do was to add the following CSS properties to the site-wide CSS style-sheet:
pre.prettyprint{
width: auto;
overflow: auto;
max-height: 600px
}
This introduces the scrollbars.
with your code everything goes to left side in my blog,
but i fixed it using the following CSS code:
pre.prettyprint {
display: block;
overflow: auto;
width: auto;
/* max-height: 600px; */
white-space: pre;
word-wrap: normal;
padding: 10px;
}
I found the code on github.

Categories