Why does an image render badly in angular 2 - javascript

First of all i'm sorry if my english doesn't make much sense, is not my first language. Ok, so my buddy and i are making a template in angular 2/6 for the data disclosure consents for a loan simulator, we have a couple of notifications when the user says "No" to each consent. Those notifications are made of an icon (image stored in "assets" folder) and some text, and they appear when the user checks the radio marked NO. The problem is that when the page loads, the first time a user clicks no the image of the notification appears with the wrong width, then if the user checks YES and goes back to NO, the image appears fine; is just the first image shown, it doesn't matter which radio is checked. Any ideas?
PS: the image is put as a background in CSS on a span preceding the text of the notification.

Solved it! not much of a mistery, actually a rookie mistake, i removed the span and put the image via CSS into the container itself (and added padding to the text) and it worked. I can't exactly explain why it didn't work when adding an empty span with the icon. The result was this:
HTML:
<div class="aviso">Text content of the warning</div>
CSS:
.aviso{
background-image: path/to/image.jpg;
background-position-x: 2%;
background-position-y: 30%;
padding: 8px 15px 8px 35px;
}
that did the trick! Thanks!

Related

Background colors not touching from two lines of text

I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.

How to dynamically change the Tweet button without it blinking?

I am trying to have the Tweet button updated dynamically so that different text is tweeted (if one presses the Tweet button) every time some event happens.
Actually, what I am trying to achieve is the same as described in the following question:
Dynamically change Tweet Button "data-text" contents
And the provided answer to that question works ok with one annoying small problem. If I implement it like that, the Tweet button blinks when it's updated (disappears and appears) because it is rendered from scratch by using
twttr.widgets.load();
Does anyone have an idea on how would I achieve the same thing but without the "blinking"?
The way I finally solved this was like so.
In the html file I define two divs one after another:
<div id="share_fixed">
<a class="twitter-share-button" href="http://twitter.com/share" data-url=" " data-size="large" data-show-count="false" data-text=" ">
</a>
</div>
<div id="share">
</div>
The div with id="share_fixed" will contain a Tweet button which will be static (rendered only when the page loads).
The other div with id="share" will contain the Tweet button which will be rerendered (updated) every time some event occurs.
In the CSS I position both divs at the same location and overlay the one which changes on top of the fixed one:
#share {
position: absolute;
bottom: 12px;
left: 15px;
z-index: 1;
}
#share_fixed {
position: absolute;
bottom: 12px;
left: 15px;
z-index: 0;
}
This will actually force the fixed "dummy" Tweet button to always be positioned below the one which changes and blinks on reload. Whenever the button on top changes and "blinks" the one below it will remain and since it's exactly the same, it will seem like nothing changes.
In the Javascript file I add e.g. something like this:
var tweetBtn = $(document.createElement('a')).addClass("twitter-share-button")
.attr('href', 'http://twitter.com/share')
.attr('data-url', ' ')
.attr('data-size', 'large')
.attr('data-show-count', 'false')
.attr('data-text', "Some new tweet text");
$("#share iframe").remove();
$("#share").append(tweetBtn);
twttr.widgets.load();
I guess there are more ways to solve this, but this works for me on Chrome, haven't tried on other browsers.

CSS Relative background not expanding on insertion of html code

Thanks for any help you can offer me/point me in the write direction.
I am not sure how to explain what is happening.
I current have a page with an image background (the image is 4044,2160 so it is larger than you would view on a single screen (normally)).
Currently when the page loads, the image is top-centered and is not on repeat and thus fills the background completely.
However when inserting html code (CRUD) via javascript, etc. with the resulting page becoming larger than the original in the y direction, the background stops and does not fill the space below.
http://postimg.org/image/jqzx0vuzr/
I am not sure what to do to fix it and most likely think it is a css problem.
Below is code:
HTML
<section id="index" class="index clinic">
<div id="x_container">
Javascript insertion of code
</div>
</section>
CSS
.clinic{
width:100%;
position:relative;
background: url(../img/clinic.jpg) no-repeat top center;
}
.index{
height: 100%;
padding: 0;
}
#index.index {
padding:15% 0 0 0;
}
#xcrud_container{
width: 90%;
margin: 0 auto;
}
It seems that the javascript does not matter as to what is inserted, (have tried lorem ipsum, etc.)
But just to expand on what is inserted, the size of the x_container changes based on a state and this is altered by javascript. (Thus page is not reloaded and background size recalculated)
I have currently tried a clearfix solution (but to no avail) as well as attempting repeat-y on the background image.
Lastly I have attempted to manually create the page through directly saving the html code (i.e. it is not inserted by anything and is apart of the html code of the page) to the page and attempting to see if the background expands. It does not. The background fills the initial view area, however as soon as you scroll down the page, the white area reappears.
Just to make sure this is known the background image is larger than area viewed, thus the white area should not be present.
Any help would be greatly appreciated, as I have been at this for a few days...
Thanks
Change % to Pixels as for example.
.index{
height:1000px;
padding: 0;
}
Thanks for you help guys,
Through the comments and answer I have been able to figure out my own stupidity in trying to force a tag to define the background of the page rather than using body. i.e. .
The reason for my defining it as a section tag is due to its use on previous pages where the was followed by another section and thus the white space area would not be a problem. (Also is the reasoning for the height:100%;, as I had to define the height of the section as being 100% in order to fully create the image within the section.
Thanks again.

javascript dropdown not working

I have been modding a vbulletin forum. All I have modded is the css from within the style editor in the bulletin control panel, plus two template files.
What I have found is that one of the javascript dropdowns is no longer working (it definitely was).
The forum is http://forum.selfbuild.com/
Other dropdowns still work ("community" and "forum actions" links in header) so it relates specifically to the "notifications" dropdown menu item, that you see when logged in.
I have reverted the two template files I modded, but the problem still occurs, so it's not that I have blasted some code out of existence.
On mouseover, rather than the browser showing javascript:// in the bottom bar, it shows a URL.
So I have no idea how to fix it - I don't know how to go about tracing a javascript problem.
Any help appreciated. To log in and see the issue, you can use testuser abc123, and once logged in the notifications menu item appears.
Remove overflow: hidden from .toplinks - then your menu will show.
.toplinks {
background: none repeat scroll 0 0 #DEDEDE;
color: #417300;
float: right;
font: 11px Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
overflow: hidden; <- kill this
text-align: right;
width: 430px;
}
This class was basically hiding everything that wasn't already shown, ie. the drop downs.

Can't align large image in center of a smaller div with overflow hidden along with caption effect

My question has three parts
Part 1: To show an animated image caption for a image (this part is done as in the example row one http://jsfiddle.net/JBnbG/32/ )
Part 2: Show center part of youtube hqdefault.jpg thumbnail image in a div of 150x150 dimension (This part is also done as second row in the example)
Part 3: I want to integrate the part 1 & part 2 features in to part 3. problem is that caption works but the image is not alined in center as show in second row of the example.
Example is in http://jsfiddle.net/JBnbG/32/
I cant change structure otherwise it wont work caption part work properly
I would appreciate if some can help to fix the issue with keeping the HTML structure intact
I guess my question is, are you loading the example html dynamically from youtube, or just the images?
If the html is yours, it's a simple styling adjustment.
I forked it on jsfiddle , I think this is what you mean.
Not quite sure what happened to the styling, but I set the image
id="ContentPlaceHolder1_rptVideos_imgVideo_1" style="height:auto; width:200px;margin-left:-25px;"
or, another way is:
left:-25px; position:relative;
Which btw, all these styles should be declared as a class in you stylesheet.
If you're loading the html dynamically, I commented out the javascript that achieves the same thing.
Depending on what you're working with, if using php, you might want to get a script that will auto crop to the appropriate size. Timthumb.php is the most notable one, although there's a security issue that will never be fully bulletproof, although pretty solid as is.
Cheers!
Check this working code: http://jsfiddle.net/surendraVsingh/JBnbG/39/
Changes to be done in CSS:
.VideoContainer > span {
display: block;
}
.VideoContainer > span > img {
display: inline-block;
margin-left: -60px;
margin-top: -25px;
}

Categories